What is the best practice to enable the user to view certain categories on a portfolio page?

Question

Here I have a portfolio page of 4 categories, when you first land on the page you will see all of them. BUT you have the option to chose form the menu which category to only show and hide all the rest.

<div class="wrapperA">
    <div class="contentB">
        <div id="portfolio-topSection">
            <a href="#" class="categoryButton-All">All</a>    
            <a href="#" class="categoryButton-VisualIdentity">Visual Identity</a>   
            <a href="#" class="categoryButton-Photography">Photography</a>      
        </div>
    </div>
</div>

<div class="wrapperB">
    <div class="content">
        <div id="portfolio-gallerySection">
        <div class="grid">
            <div class="itemWrapper categoryAll">
                <a href="index.html"><img alt="" src="assets/images/me.png"></a>
                <span><p>Click To View Project</p></span>
            </div>
            <div class="itemWrapper categoryWebDesign">
                <a href="index.html"><img alt="" src="assets/images/11.png"></a>
                <span><p>Click To View Project</p></span>
            </div>
        </div>
        <div class="grid">
            <div class="itemWrapper categoryVisualIdentity">
                <a href="index.html"><img alt="" src="assets/images/me.png"></a>
                <span><p>Click To View Project</p></span>
            </div>
            <div class="itemWrapper categoryPhotography">
                <a href="index.html"><img alt="" src="assets/images/me.png"></a>
                <span><p>Click To View Project</p></span>
            </div>
        </div>
        <div class="grid">
            <div class="itemWrapper category-WebDesign">
                <a href="index.html"><img alt="" src="assets/images/11.png"></a>
                <span><p>Click To View Project</p></span>
            </div>
            <div class="itemWrapper category-WebDesign">
                <a href="index.html"><img alt="" src="assets/images/me.png"></a>
                <span><p>Click To View Project</p></span>
            </div>
        </div>
    </div>
</div>
</div>

$('.categoryButton-All').click(function() {
    $(this).addClass('portfolio-topSectionClicked'); 
    $("#portfolio-gallerySection .grid div").not(".categoryAll").fadeOut(); 
});

In a fiddle: http://jsfiddle.net/4HFvx

Answer 1

I've updated your fiddle below. I supply each filter button with a "data-filter" attribute, then apply this as a class to your gallery using the following script:

;(function(){
    var $portfoliogallerySection = $('#portfolio-gallerySection'),
        $filterbuttons = $('#portfolio-topSection a');
    $filterbuttons.on('click', function(){
         var $this = $(this);
         $filterbuttons.removeClass('active');
         $this.addClass('active');
         $portfoliogallerySection.attr('class', $this.data('filter'));
    });
}());

Then use css to hide / show appropriately categorised items in the gallery, i'll leave the transitions to you.

http://jsfiddle.net/4HFvx/4/