Question

I’m new to JavaScript and jQuery so please be gentle with me. I’m trying to animate a show/hide of several divs based on if it has a certain class or not.

Basically, I’m creating a site for a photographer and have a portfolio section with a list of filters along the top, each div has a class of “portfolio-items” as well as additional classes for all the categories it’s in, so family / wedding / kids / couples. any image can have multiple classes on it.

What I want to do is click on the family link and it hides anything that doesn’t have the family class on it. If I then click on wedding it closes anything that’s currently open that doesn’t have the wedding class on it and opens anything thats currently closed that does have the wedding class on it.

I currently have it working with the code below but this simply closes everything and then opens the ones that have the class required. Plus I don’t know how to add an animate to it.

function portfolioItems(filter) {
 $(".portfolio-items").hide();
 $("."+filter).show(); }

function initEventHandlers () {
 $(".port-all").click(function () { 
    $(".portfolio-items").show();   
    return false;
 })
 $(".port-wedding").click(function () {
portfolioItems("wedding");
return false;
 })
 $(".port-family").click(function () {
portfolioItems("family");
return false;
 })
 $(".port-kids").click(function () {
portfolioItems("kids");
return false;
 })
 $(".port-couples").click(function () {
portfolioItems("couples");
return false;
 }) }

The HTML is…

    <div class="portfolio-container">
        <div class="portfolio-links">
            <a href="#"><img alt="All" class="port-all" src="images/port-all.png" /></a>
            <a href="#"><img alt="family" class="port-family" src="images/port-family.png" /></a>
            <a href="#"><img alt="wedding" class="port-wedding" src="images/port-wedding.png" /></a>
            <a href="#"><img alt="couples" class="port-couples" src="images/port-couples.png" /></a>
            <a href="#"><img alt="kids" class="port-kids" src="images/port-kids.png" /></a>
        </div>
        <div class="portfolio">
            <div class="portfolio-items wedding couples family"></div>
            <div class="portfolio-items kids"></div>
            <div class="portfolio-items wedding kids family"></div>
            <div class="portfolio-items couples"></div>
            <div class="portfolio-items couples kids family"></div>
            <div class="portfolio-items wedding"></div>
        </div>
    </div>

Answer 1

First of all you may use not selectors(look here!) to avoid hiding all your photos. Just assign two classes to your blocks with photos. Something like this

    <div class="portfolio-items wedding"></div>
    <div class="portfolio-items family"></div>
    <div class="portfolio-items kids"></div>

And then you can rewrite your portfolioItems function in this way

    function portfolioItems(filter) {
        $(".portfolio-items:not(."+filter+")").hide();
    }

Secondly you may create one generic function for hiding some category, but not duplicating the same code by several times.