[jQuery] Symantic Markup with Nice Accordion.. ..
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