Gallery Tag Sorter

by kthornbloom

HTML

<div class="sidebar">
    <br><br>
        <h1>Tags</h1>
    <div class="sort">
        <a href="#" title="blue">blue</a>
        <a href="#" title="red">red</a>
        <a href="#" title="green">green</a>
        <a href="#" title="yellow">yellow</a>
        
    </div>
</div>
<div class="gallery">
    <div class="gal-item blue red">
        blue + red
    </div>
    <div class="gal-item green">
        green
    </div>
    <div class="gal-item yellow red">
        yellow + red
    </div>
    <div class="gal-item blue green">
        blue + green
    </div>
    <div class="gal-item red green">
        red + green        
    </div>
    <div class="gal-item yellow">
           yellow
    </div>
</div>

CSS

body, html {
    height:100%;
    width:100%;
    font-family:sans-serif;
}
.sidebar {
    position:absolute;
    height:100%;
    background: #3C3C3C;
    width:200px;
    padding:0 15px;
}
.sidebar h1 {
    color:#fff;
    text-align:center;
    border-bottom:1px solid #ccc;
    margin:0 0 20px 0;
    padding:5px;
}
.sort a:link,
.sort a:visited {
    background: rgb(121, 129, 145);
    color: #fff;
    text-decoration: none;
    display: inline-block;
    padding: inherit;
    border-radius: 3px;
    margin:0 15px 5px 0;
    position: relative;
    height: 21px;
    font-size: 13px;
    padding: 7px 10px 0 10px;
}

.sort a:link:before,
.sort a:visited:before {
    content: "";
    display: block;
    border: 14px solid transparent;
    border-left: 14px solid rgb(121, 129, 145);
    position: absolute;
    right: -26px;
    top: 0;
}
.sort a:link:after,
.sort a:visited:after {
    content: "";
    display: block;
    background: #3C3C3C;
    border-radius: 10px;
    height: 5px;
    width: 5px;
    position: absolute;
    right: -1px;
    top: 11px;
}
.sort a:hover {
    background:rgb(84, 96, 121);
}
.sort a:hover:before {
    border-left: 14px solid rgb(84, 96, 121);
}

.gallery {
    padding-top:5px;
    margin:0 5px 0 235px;
}
.gal-item {
    display:inline-block;
    width:150px;
    height:150px;
    border:1px solid #000;
}

JavaScript

$('.sort a').click(function(){
    var getTag = $(this).attr('title');
    $('.gal-item').not('.'+getTag).slideUp();
    $('.gal-item' + '.'+getTag).slideDown();
});