Search code examples
jquerytoggleclass

jQuery toggleClass on specific class


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>

Solution

  • 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/