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

Reply via email to