How to toggle elements with jQuery?

Question

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>

Products 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 thought he just wanted to toggle the products he is showing based on the ul they clicked — Kevin Bowersox
– Kevin Bowersox, Commented Jun 30, 2011 at 16:55
So, not any single answer accepted? For none of your questions? — Sergi Juanola
– Sergi Juanola, Commented Jul 1, 2011 at 23:19

Sergi Juanola · Accepted Answer · 2011-06-30 22:13:55Z

2

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.

edited Jun 30, 2011 at 22:13

answered Jun 30, 2011 at 16:50

Sergi Juanola

6,6478 gold badges59 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Buildingbrick Over a year ago

yea this sounds right...what about adding the showing/hiding the products as well?

Kevin Bowersox Over a year ago

@Buildingbrick checkout my example it details how to show and hide

Buildingbrick Over a year ago

very nice!! Thanks. You are pro!

Kevin Bowersox Over a year ago

@Kor haha you hijacked my fiddle

Sergi Juanola Over a year ago

@kmb385 oh lol I didn't even see your answer xD, I thought of doing that way, the problem is that each DOM element needs a different id, so you would have problems for showing/hiding them in some places

|

Kevin Bowersox · Accepted Answer · 2011-06-30 17:32:28Z

1

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);
});

edited Jun 30, 2011 at 17:32

answered Jun 30, 2011 at 16:52

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

6 Comments

Buildingbrick Over a year ago

is there a way to normalize this anyway? Or bring the code down to a single function that will work for all three buttons?

Kevin Bowersox Over a year ago

@Buildingbrick i updated the fiddle and this code give it a look

Buildingbrick Over a year ago

Looks good! But "All" is actually just "Men" and "Women" so having an all "section" would be redundant...right?

Kevin Bowersox Over a year ago

@Buildingbrick yes it could be, could you give me credit for the work I did?

Kevin Bowersox Over a year ago

@Buildingbrick In my earlier post i was wondering if you could accept my answer or at least one up my post since it made its way into your question you must be using the new code.

|

ChinhVT · Accepted Answer · 2011-06-30 17:04:18Z

0

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

answered Jun 30, 2011 at 17:04

ChinhVT

865 bronze badges

1 Comment

Buildingbrick Over a year ago

This will work as well. Never used the "toggle(false)" before, usually use "hide()". I guess toggle works better since we are using toggle as the event.

cHao · Accepted Answer · 2011-06-30 18:41:48Z

0

$(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>

edited Jun 30, 2011 at 18:41

answered Jun 30, 2011 at 18:28

cHao

87.1k21 gold badges147 silver badges178 bronze badges

3 Comments

Buildingbrick Over a year ago

what is the .hasClass() event for?

cHao Over a year ago

It tests whether the element (the button in this case) has "mens" or "womens" among its CSS classes. The code will take any element that has both the "prod" and "men" classes, and (because of how toggle works) show it if the button has the "mens" class, and hide it otherwise. Similar story with the women's stuff. The key to making this work is to give the "all" button both "mens" and "womens" classes -- that makes both of the hasClass calls return true, and thus makes everything show.

cHao Over a year ago

BTW, for reference, .hasClass isn't an event. It's a method (basically, a function on an object)...in this case on the object that jQuery objects (the things you get from $('whatever')) inherit from. Things like .click are methods too. jQuery just happens to use them to wire up event handlers and trigger events.

Collectives™ on Stack Overflow

How to toggle elements with jQuery?

4 Answers 4

6 Comments

6 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

6 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related