I had the original demo from a popular site to get the Accordion menu to work... I work with a team and we have designers who will want to access the markup with css perfectly. So of course we want the markup like this:
<div class="demo-show2"> <ul> <li style="border-top: 1px solid black;" class="menuCat">Category One<ul class="linkContainer"> <li><a href="/products/c1_products/c1_sub1_products">sub-Category c1_sub1</a></li> </ul> </li> <li class="menuCat">Category Two<ul class="linkContainer" style="display: none;"> <li><a href="/products/c2_products/c2_sub1_products">sub-Category c2_sub1</a></li> <li><a href="/products/c2_products/c2_sub2_products">sub-Category c2_sub2</a></li> <li><a href="/category/c2_products/c2_sub3_products">sub-Category c2_sub3</a></li> </ul> </li> </ul> </div> I want to click the Category li item and have the ul linkContainer show or not show as needed. Here is the jQuery I am trying to modify: $(document).ready(function() { $('li.menuCat> ul.linkContainer:not(:first)').hide(); $('div.demo-show2>ul> li.menuCat').click(function() { var $nextUL = $(this).next(); var $visibleSiblings = $nextUL.siblings('div.demo- show2>ul>li.menuCat> ul.linkContainer:visible'); if ($visibleSiblings.length ) { $visibleSiblings.slideUp('fast', function() { $nextUL.slideToggle('fast'); }); } else { $nextUL.slideToggle('fast'); } }); }); Much Help Much Appreciated