jQuery toggleClass on specific class

Question

I've made this jQuery code that toggles class to open and close. but when I click on the Dashboard navigator it's also affecting the other classes

Here is my sample code.

JavaScript:

$(document).ready(function(){
    $('ul.nav li a#mainnav').click(function(){
        $('ul.nav li ul').toggleClass('opened');
    });
});

CSS:

div#wrapper div#main_sidebar ul.nav li ul.closed{
    height: 0;
    overflow: hidden;
}
div#wrapper div#main_sidebar ul.nav li ul.opened{
    height: auto;
}

HTML:

<div id="main_wrapper">
    <div id="wrapper">
        <div id="main_sidebar">
            <ul class="nav">
                <li>
                    <a id="mainnav">Dashboard</a>
                    <ul class="closed opened">
                        <li><a href="#">Menu Manager</a></li>
                        <li><a href="#">Script Pages</a></li>
                        <li><a href="#">Plugin Manager</a></li>
                        <li><a href="#">User Manager</a></li>
                    </ul>
                </li>
                <li>
                    <a id="mainnav">Settings</a>
                    <ul class="closed">
                        <li><a href="#">Post settings</a></li>
                        <li><a href="#">User settings</a></li>
                        <li><a href="#">Permalink Structure</a></li>
                    </ul>
                </li>
                <li>
                    <a>Edit</a>
                    <ul id="main_nav" class="closed">
                        <li><a href="#">Edit Posts</a></li>
                        <li><a href="#">Edit Pages</a></li>
                        <li><a href="#">Edit Links</a></li>
                        <li><a href="#">Edit Menu Items</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

score 2 · Accepted Answer · answered Oct 17 '12 at 16:03

2

In order to toggle only the specific list, use next() or siblings("ul"):

$("#mainnav").click(function() {
    $(this).next().toggleClass("opened");
});

DEMO: http://jsfiddle.net/efAZU/10/

answered Oct 17 '12 at 16:03

VisioN

143,310
32
282
281

how about if I would like to give it a slide effect? is it possible? – Kevin Steve Maningo Oct 17 '12 at 16:17
1

@KevinSteveManingo No problem, just use `slideToggle`: http://jsfiddle.net/efAZU/16/. – VisioN Oct 17 '12 at 16:19
can it start with the navigator to be close at first? – Kevin Steve Maningo Oct 17 '12 at 16:30

Igor · Answer 2 · 2014-06-09T00:43:46.340

1

Upon clicking the mainNav, you are toggling all of them with your selector, instead try something like this in your click function:

$(this).siblings('ul').toggleClass('opened');

If you want the slide effect, you can use slideToggle() instead.

edited Jun 09 '14 at 00:43

answered Oct 17 '12 at 16:06

Igor

33,276
14
79
112

how about if I would like to give it a slide effect? is it possible? – Kevin Steve Maningo Oct 17 '12 at 16:19

jQuery toggleClass on specific class

2 Answers2