Jquery use to show/hide on click

by maitrekaio

HTML

<ul class="nav" id="filtre">
    <li><a id="all" href="#">Tout</a></li>
    <li><a href="#" id="pizza">pizza</a></li>
    <li><a href="#" id="kebab">kebab</a></li>
</ul>
<div id="content">
    <div class="pizza active">
        <h3>
            <a href="#">pizza</a>
        </h3>
        <ul>
            <li><a href="#">Calzone</a></li>
            <li><a href="#">Margarita</a></li>
        </ul>
    </div>
    <div class="kebab active">
        <h3>
            <a href="#">kebab</a>
        </h3>
        <ul>
            <li><a href="#">Harissa</a></li>
            <li><a href="#">Sauce blanche</a></li>
        </ul>
    </div>
</div>

CSS

#filtre {
    float:left;        
}

#content {
    margin-left: 100px;
}

JavaScript

function toggleCategory(category) {
    var element = $('div.' + category);
    element.toggleClass("active");
    if (element.hasClass("active")) {
        element.show("slow");
    }
    else {
        element.hide("slow");
    }      
}

$('#filtre a').click(function() {
    var category = $(this).attr("id");
    if (category == "all") {
        $("#content>div").each(function() {
            $(this).addClass("active");
            $(this).show("slow");
        });
    }
    else {
        toggleCategory(category);
    }
  }
);