i have a simple menu, something like this:
<ul id="navigation">
<li id="m_li">
<div><span>+</span><a href="#" >myself</a></div>
<ul class="test" id="x_ul">
<li id="li">
<a href="#" >Pictures</a>
</li>
<li id="li">
<a href="#" >Audio</a>
</li>
</ul>
</li>
<li id="profile_modeling_li">
<div><span>+</span><a href="#" >friend</a></div>
<ul class="test" id="y_ul">
<li id="li">
<a href="#" >Pictures</a>
</li>
<li id="li">
<a href="#" >Video</a>
</li>
</ul>
</li>
</ul>
then i use jquery so when i click on the +
sign the ul slides down:
$("#navigation > li > div > span").click(function(){
if(false == $(this).next('ul').is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next('ul').slideToggle(300);
});
the issue is that $(this).next('ul')
doesn't seem to fond the next ul
any ideas what am i doing wrong?
use
$(this).parent().next()
instead of
$(this).next();
and, of course, you can pass a selector (more simple or more complex) that identifies the desired element as argument:
$(this).parent().next('ul.test[id$="_ul]"');