Tag list

...with click-to-remove

by tonytlwu

HTML

<div id="container">
    <div id="filters">
        <span><i>Current Auctions</i></span>
        <span><i>Coming Soon</i></span>
        <span><i>Virtual Bourse</i></span>
        <span><i>Post-Auction Buys</i></span>
        <span><i>Coins: US, World and Ancients</i></span>
        <span><i>Coins: US, World and Ancients</i></span>
        <span><i>Current: 2014 September 13 - 14 Fine &amp; Decorative Art Including The Gentleman Collector Signature Estate Auction - Slocum 5189</i></span>
        <span><i>Current: 2014 September 13 - 14 Fine &amp; Decorative Art Including The Gentleman Collector Signature Estate Auction - Slocum 5189</i></span>
        <span><i>Virtual Bourse</i></span>
        <span><i>Post-Auction Buys</i></span>
            <span><i>Coins: US, World and Ancients</i></span>
    </div>
</div>

CSS

div#container {
    background: #f1f1f1;
    width: 210px;
    padding: 10px 19px;
    font: 11px/26px Arial;
}

span {
    background: #ccc;
    color: #333;
    padding: 4px 5px 4px 0;
    margin-right: 9px;
    cursor: pointer;
    box-shadow: 4px 0 0 #ccc, -4px 0 0 #ccc;
}

span {
    font-style: normal;
}

span:nth-child(even) {
    /* background: #aaa; */
    /* box-shadow: 4px 0 0 #aaa, -4px 0 0 #aaa; */
}

span i {
    font-style: normal;
}

span:hover {
    background: darkred;
    color: #fff;
    box-shadow: 4px 0 0 darkred, -4px 0 0 darkred;
    text-decoration: line-through;
}

span:hover i {
    text-decoration: line-through;
}

span:after {
    content: '\00D7';
    color: darkred;
    display: inline;
    margin-left: 5px;
    border-left: 1px solid #e3e3e3;
    padding: 4px 2px 4px 6px;
    margin-right: -4px;
}

span:hover:after {
    color: #fff;
    border-left-color: #fff;
}

JavaScript

$('#filters').on('click','span',function(){
    $(this).fadeOut(400,function(){
        $(this).remove();
    });
});