Filter content using checkboxes & JQuery

Filter content using checkboxes & JQuery

by AndreaLigios

HTML

<div class="tags">
        <label>
            <input type="checkbox" rel="spaces" />
            Acoustic Spaces
        </label>
     <br>
        <label>
            <input type="checkbox" rel="elements" />
            Sonic Elements
        </label>

CSS

body {
    background-image: url("http://i.imgur.com/6xNRfGi.png");
    background-size: 804px 356px;
    background-repeat: no-repeat;
    background-position: 0px 100px; 
}
.container {
    position: relative;
    width: 100%;
}
ul{
    position:relative;
}
li{
    position:absolute;
    top:0;
    left:0;
}

JavaScript

$(document).ready(function () {
            $('.results > li').hide();

            $('div.tags').find('input:checkbox').live('click', function () {
                $('.results > li').hide();
                $('div.tags').find('input:checked').each(function () {
                    $('.results > li.' + $(this).attr('rel')).show();
                });
            });
        });