[jQuery] Re: Make Learning Jquery Accordian Work With Unordered List

Mon, 08 Jun 2009 03:15:58 -0700

the reason it doesn't work is  ul.links isn't a sibling of the li that click occurs on, it is nested inside that li and therefore is a child. In the Learning jQuery example, the div's that are being opened and closed are siblings of the h3 that is being clicked

.next() will look for a sibling, not a child.

you can make it work by changing the 2 var's to look for ul.links as children

        var $nexto = $(this).find(".links");
       
        var $visibleSiblings = $(this).siblings().find('.links:visible');
working example http://jsbin.com/efazo/



followerofjesus wrote: 
Hello, I was wondering how to make http://www.learningjquery.com/2007/03/accordion-madness
by Karl, work with an unordered lis instead of divs. I tried the below
but did not work. I think what I have done here ('.links:visible');
looks plain wrong (I can't put a class or an Id in there right??)

$(document).ready(function() {

 $('.links').hide();

$('.category').click(function() {

var $nexto = $(this).next();

var $visibleSiblings = $nexto.siblings('.links:visible');

if ($visibleSiblings.length ) { $visibleSiblings.slideUp('fast',
function() {$nexto.slideToggle('fast'); });
} else {
$nexto.slideToggle('fast');
 }
 });
 });

The HTML:

<ul>
<li class="category">Web Packages and Services
<ul class="links">
<li><a href="">How do you do</a></li>
<li><a href="">How are you going</a></li>
<li><a href="">Have a good day</a></li>
<li><a href="">Testing testing</a></li>
<li><a href="">Good day to you</a></li>
</ul>
</li>
<li class="category">Web Packages and Services
<ul class="links">
<li><a href="">How do you do</a></li>
<li><a href="">How are you going</a></li>
<li><a href="">Have a good day</a></li>
<li><a href="">Testing testing</a></li>
<li><a href="">Good day to you</a></li>
</ul>
</li>
</ul>

Reply via email to