I've been trying to create a basic accordion effect using unordered
lists and, having looked through some examples on learningjquery.com, I
think I'm close. I'm having trouble navigating through the hierarchy
though. An example list is below. Any links with a class of 'expandLink'
are supposed to reveal the nested list below and hide any other nested
lists:
<div class="mcon">
<ul>
<li><a href="http://www.example.com";>Example</a></li>
<li><a href="http://www.yahoo.co.uk";>Yahoo</a></li>
<li><a href="" class="expandLink">More</a></li>
<ul class="vsubmenu">
<li><a href="http://www.bbc.co.uk";>beeb</a></li>
<li><a href="http://news.bbc.co.uk";>beeb news</a></li>
</ul>
<li><a href="http://www.cnn.com/";>CNN</a></li>
<li><a href="http://www.jquery.com";>jQuery</a></li>
<li><a href="" class="expandLink">Not news</a></li>
<ul class="vsubmenu">
<li><a href="http://sport.bbc.co.uk";>beeb sport</a></li>
</ul>
<li><a href="http://www.msn.com/";>MSN</a></li>
</ul>
</div>
The script I'm trying to get working is:
$(document).ready(function(){
$('div.mcon ul.vsubmenu').hide();
$('div.mcon a.expandLink').click(function() {
$(this).next('ul').slideToggle('fast')
.siblings('ul.vsubmenu:visible').slideUp('fast');
return false;
});
});
I think it's close. If I remove the trailing </li>'s then the sub list
displays so I guess 'next' is not correct in this instance?
Any help would be greatly appreciated :)
Gareth
