CODEWITHSUNDEEP
jquerytwitter-bootstrap
Anish
Anish

Reputation: 4998

Toggle child menu in sidebar navigation nav-tabs bootstrap

I was working on sidebar navigation(using bootstrap). But I got stuck here. I am not able to toggle the child menu . All I need to hide the child menu when I clicked on the top menu such as Main,Next Section and Third Section. For eg when I click on the Main menu it has to hide all the child dashboard and click on Next section menu has to hide all sample section .

Any help highly appreciable

This is the structure

<ul class="nav nav-tabs nav-stacked main-menu">
        <li class="nav-header">Main</li>
        <li><a href='#'>Dashboard</a></li>
        <li><a href='#'>Dashboard</a></li>
        <li><a href='#'>Dashboard</a></li>
        <li><a href='#'>Dashboard</a></li>
        <li class="nav-header">Next Section</li>
        <li><a href='#'>Sample Section</a></li>
        <li><a href='#'>Sample Section</a></li>
        <li><a href='#'>Sample Section</a></li>
        <li><a href='#'>Sample Section</a></li>
        <li class="nav-header">Third Section</li>
        <li><a href='#'>Third Sample Section</a></li>
        <li><a href='#'>Third Sample Section</a></li>
        <li><a href='#'>Third Sample Section</a></li>
        <li><a href='#'>Third Sample Section</a></li>
    </ul>

Upvotes: 0

Views: 1835

Answers (2)

brbcoding
brbcoding

Reputation: 13586

$(document).ready(function(){
    $('li.nav-header').click(function(){
        $(this).nextUntil('li.nav-header').toggle();
    });
});

DEMO

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362360

You can use jQuery .nextUntil() like this..

$('.nav-header').click(function () {
    $(this).nextUntil('.nav-header').toggle(200);
});

Demo: http://bootply.com/67126

Upvotes: 3

Related Questions