[jQuery] trouble with a simple multi level list
Hello,
I try to develop a basic multilevel show hide list.
Each element i click toggle the next level ...It'ok but when a the
beggining i open the list all ements are shown! This trouble
disappears after first usage!
Any idea or solution?
Thanks. Xavier
jQuery Code
function initToogleList(){
// get all span with class sub
var $span=$("span.sub");
// define toggle onclick event on list:
$span.click(function() {
$(this).parent().find("ul").toggle();//.fadeTo("slow",0)//
slideToggle("fast")
});
// close lists at beginning
$span.parent().find("ul").hide();
}
Html Code
<ul>
<li><span class="sub">Titre1</span>
<ul>
<li><span class="sub">Sous Titre11</span></li>
<li><span class="sub">Sous Titre12</span>
<ul>
<li><span class="sub">Sous Titre121</span></li>
<li><span class="sub">Sous Titre122</span></li>
</ul>
</li>
<li>Sous Titre13</li>
</ul>
</li>
<li><span class="sub">Titre2</span>
<ul>
<li><span class="sub">Sous Titre21</span></li>
<li><span class="sub">Sous Titre22</span></li>
</ul>
</li>
</ul>