...

View Full Version : Simple jQuery Accordion Menu - HELP!



mmc215
09-08-2010, 09:51 PM
Hit a snag here, I've put together a rather simple accordion menu but am having trouble getting the visible menus to "slideUp" when another sibling <li> is selected (aka, do the accordion thing). The initial "hide" and "slideToggle" function to make them go up and down works just fine.

I'm using this format for the menu:

<div class="accordion">
<ul>
<li><a href=#">NAV LINK #1</a>
<ul>
<li><a href=#">second level link #1</li></a>
<li><a href=#">second level link #1</li></a>
<li><a href=#">second level link #1</li></a>
<li><a href=#">second level link #1</li></a>
</ul>
</li>
<li>NAV LINK #2...


<script type="text/javascript">
$(document).ready(function() {
$('div.accordion> ul ul').hide();
$('div.accordion> ul li a').click(function() {
$(this).next('ul').slideToggle('fast')
.siblings('ul:visible').slideUp('fast'); //THIS IS WHERE I'M STUCK
});
});
</script>

Any help would be GREATLY appreciated!

Thanks!
Matt

harbingerOTV
09-08-2010, 10:27 PM
<script type="text/javascript">
$(document).ready(function() {
$('div.accordion> ul ul').hide();
$('div.accordion> ul li a').click(function() {
$(this).next('ul').slideToggle('fast').parent('li').siblings('li').children('ul:visible').slideUp('f ast'); //THIS IS WHERE I'M STUCK
});
});
</script>



$(this).next('ul').slideToggle('fast').parent('li').siblings('li').children('ul:visible').slideUp('f ast');

so find the parent of the clicked "a" which is a "li". Then look for it's siblings (other "li"s). Then look for all their children "ul"s that are visible and slide them up.

make sense?

mmc215
09-08-2010, 10:49 PM
Ahhh!

Yeah makes total sense, I don't think I was going to come to that conclusion myself though. Works great! I really appreciate the quick response.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum