Toggling between showing all images and showing only a certain class

by Akram kamal

HTML

<ul class="categories">
    <li>All</li>
    <li>Red</li>
    <li>Blue</li>
    <li>Grey</li>
</ul>

<select name=color>
    <option>all</option>
    <option>red</option>
    <option>blue</option>
    <option>grey</option>
</select>
<img src="r1.png" alt="red 1" class="color red">
<img src="r1.png" alt="blue 1" class="color blue">
<img src="r1.png" alt="grey 1" class="color grey">

CSS

.color {
    width:100px;
    height:100px;
    display:none;
}
body.red .color.red {
    display:inline
}
body.blue .color.blue {
    display:inline
}
body.grey .color.grey {
    display:inline
}
body.all .color {
    display:inline
}

JavaScript

$(function () {
    /*
    $("[name=color]").change(function () {
        $("body").removeClass("all red blue grey").addClass( $(this).val() );
    }).change()
    */
    $(".categories li").click(function(){
        $("body").removeClass("all red blue grey").addClass( $(this).text().toLowerCase() );
    }).first().click()
})