How to toggle elements with jQuery?

I am building a website page that has like 16 items of apparel.

I want a simple text navigation that has the option to show and hide products that are either for Men, Women, and All.

Navigation

<ul class="sortNav">
<li class="first">View:</li>
<li class="men button">Men</li>
<li class="women button">Women</li>
<li class="all button active">All</li>
</ul>

Prod开发者_Python百科ucts Code

<span class="prod men">Guys shirt</span>
<span class="prod men">Guys Pant </span>
<span class="prod women">Girls Pant</span>
<span class="prod women">Girls Pant</span>

Tricky part

Only one button can be "active". And only that class will be visible (one or two) will be triggered.

Thanks in advance.

Thanks! Kinda combined the two responses. Check this out...

$('.products li.prod').toggle(true);

$('.sortNav li.button').click(function () {
    $('.sortNav li.button').removeClass('active');
    $(this).addClass('active'); });

$('.sortNav li.men').click(function () {
    $('.products li.prod').toggle(false);
    $('.products li.men').toggle(true); });

$('.sortNav li.women').click(function () {
    $('.products li.prod').toggle(false);
    $('.products li.women').toggle(true); });

$('.sortNav li.all').click(function () {
    $('.products li.prod').toggle(true);

---

I Compacted a little bit the code, but you should also change the li items

HTML:

<ul class="sortNav">
<li class="first">View:</li>
<li section="mens" class="men button">Men</li>
<li section="womens" class="women button">Women</li>
<li section="all" class="all button active">All</li>
</ul>

<div id="all" class="section">All Clothing</div>
<div id="mens" class="section">Mens Clothing</div>
<div id="womens" class="section">Womens Clothing</div>

JS:

$(document).ready(function(){
    $('li.button').click(function(){ //listens to each element li with class button
        $('li.button').removeClass('active'); //removes 'active' class from all of them
        $(this).addClass('active'); //adds the class to this one

        $('.section').toggle(false);
        $('#'+$(this).attr('section')).toggle(true);
    });

    $(".section").toggle(false);
});  

As you see I added a section attribute, which you can assign to toggle(true) as an id. It's a bit risky, but it works.

---

Check out this js fiddle: http://jsfiddle.net/9kL7q/3/ *NEW Fiddle

Html:

<ul class="sortNav">
<li class="first">View:</li>
<li id="men" class="men button">Men</li>
<li id="women" class="women button">Women</li>
<li id="all" class="all button active">All</li>
</ul>

<div id="all" class="section">All Clothing</div>
<div id="men" class="section">Mens Clothing</div>
<div id="women" class="section">Womens Clothing</div>

Javascript:

$(".section").not("#all").toggle(false);

$(".section").click(function(){
    $(".section").toggle(false);
    $("#" + $(this).attr("id")).toggle(true);
});

---

@kmb385: I fixed the jquery selectors for you to make "mens" and "womens" work on click http://jsfiddle.net/9kL7q/2/

---

$(document).ready(function() {
    $('.sortNav li.button').click(function() {
        // Set this button as active
        $('.sortNav li.button').removeClass('active');
        $(this).addClass('active');

        // Show and hide items that do or don't match this button's classes
        // (.prod.all won't get messed with, but you could make the HTML say
        // 'class="prod men women"' instead and it should work)
        $('.prod.women').toggle($(this).hasClass('womens'));
        $('.prod.men').toggle($(this).hasClass('mens'));
    });
});

Use with HTML that looks like this:

<ul class="sortNav">
    <li class="first">View:</li>
    <li class="mens button">Men</li>
    <li class="womens button">Women</li>
    <li class="mens womens button active">All</li>
</ul>

<div class="prod all">an item for everyone</div>
<div class="prod women">Womens item</div>
<div class="prod men">Mens item</div>
<div class="prod men">More Mens stuff</div>
<div class="prod women">More Womens stuff</div>