CODEWITHSUNDEEP
jqueryhtmlcss
pagol
pagol

Reputation: 507

jquery accordion menu with nested

i am facing now problem for nested accordion.

demo : http://jsfiddle.net/cyber007/baUH8/ .. 1st level accordion is fine now i need 2nd level also. like 

<li class='has-sub'><a href='#'><img src="images/icon-2.png" />General Setting<i>Protocol Utilization</i></a>
    <ul>
    <li><a href='#'><span>Widgets</span></a></li>
    <li class='has-sub'><a href='#'><span>Menus</span></a>
        <ul>
          <li><a href='#'><span>test 3rd</span></a></li>
          <li><a href='#'><span>test 3rd</span></a></li>
          <li class='last'><a href='#'><span>test 3rd</span></a></li>
    </ul>
</li>

i want to add another accordion under Menus in html added but it not work. can you guys tell me how to do.

Upvotes: 1

Views: 297

Answers (2)

Bhavik
Bhavik

Reputation: 4904

Working result

Changed click selector to $('#cssmenu a')

Added a class to inner ul <ul class='innerLevel'>

Check if it is not a request to open inner Menu slideUp the prev open menu 

if (!$(checkElement).hasClass('innerLevel')) {
    $('#cssmenu ul ul:visible').slideUp('normal');
}

Not a perfect solution. Suggestions would be greatly appreciated.

Hope it helps...

Upvotes: 1

cracker
cracker

Reputation: 4906

Check This Have a Same Function as you want

Javascript: 

$(document).ready(function() {
    $('.sidebar ul li a').click(function(ev) {
        $('.sidebar .sub-menu').not($(this).parents('.sub-menu')).slideUp();
        $(this).next('.sub-menu').slideToggle();
        ev.stopPropagation();
    });
});

Demo

Your Code is Edited Here Please check it Demo

Upvotes: 2

Related Questions