CODEWITHSUNDEEP
javascriptjquery
user3350731
user3350731

Reputation: 972

Collapse close other when one is open jQuery

Basically I have this HTML code : 

<ul id="menu_parent_1" class="collapse in">
    <li>
        <a href="http://test.com" class="list-group-item index">PARENT TEST 00</a>
    </li>
    <li class="SubMenuParent">
        <a data-toggle="collapse" href="#menu_carrier" class="list-group-item carrier ">PARENT TEST 01</a>
    </li>
    <ul style="height: auto;" class="collapse SubMenu" id="menu_carrier">
        <li class="active">
            <a href="http://test.com">SubTest 011</a>
        </li>
        <li>
            <a href="http://test.com">SubTest 012</a>
        </li>
        <li>
            <a href="http://test.com">SubTest 012</a>
        </li>
    </ul>
    <li class="SubMenuParent">
        <a data-toggle="collapse" href="#menu_customer" class="list-group-item customer ">PARENT TEST 02</a>
    </li>
    <ul style="height: auto;" class="collapse SubMenu in" id="menu_customer">
        <li class="active" style="background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.1);">
            <a href="http://test.com">SubTest 021</a>
        </li>
        <li>
            <a href="http://test.com">SubTest 022</a>
        </li>

    </ul>
    <li class="SubMenuParent">
        <a data-toggle="collapse" href="#menu_rules" class="list-group-item rules ">PARENT TEST 02</a>
    </li>
    <ul style="height: auto;" class="collapse SubMenu" id="menu_rules">
        <li class="active">
            <a href="http://test.com">SubTest1</a>
        </li>
    </ul>
</ul>

By clicking on PARENT TEST I'd like it's content meaning (its SUB TEST ) to silde down and other to slide up. Here's what I've tried so far and didn't work: 

jQuery('.SubMenuParent a').click(function() {
    var Toggle = jQuery(this).closest('ul');
    jQuery(this).not(Toggle).slideUp()
    jQuery(".SubMenu").each(function( index ) {
        if(jQuery(this).hasClass("in")){
            jQuery(this).slideToggle();
            // jQuery(this).slideUp();
        }
    });

});

Any help with this? Much apprciated. JSFIDDLE DEMO

Upvotes: 1

Views: 1209

Answers (1)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this :

jQuery('.SubMenuParent a').click(function() {
    var Toggle = jQuery(this).closest('li').next('ul.SubMenu');
    //slide up all submenu except for clicked subMenuParent
    jQuery('ul.SubMenu').not(Toggle).slideUp();
    //remove 'in' class
    jQuery('.in').removeClass('in');

    //toggle menu and add class 'in'
    jQuery(Toggle).addClass('in').slideToggle();

});

DEMO

Upvotes: 1

Related Questions