0xDECAFBAD 0xDECAFBAD - 2 months ago 7
HTML Question

jQuery fadeIn: Children should not be faded

I have built an collapsable tree with li and ul elements. I am using the jQuery.fadeIn and jQuery.fadeOut to collapse respectively show branches in the tree by applying these functions to nested ul elements.

Works nearly perfect, but a small problem appears when collapsed branches are shown: If the branch to show contains collapsed branches itself, the collapse state of these branches will not be preserved meaning that all the child branches will also be shown.

<li id="branch1"> Item 1
<ul style="display:none">
<li> Branch 1
<ul style="display:none">
...
</ul>
</li>
</ul>
</li>


If I now call the following, also the Branch 1 will be faded in.

jQuery("#branch1 ul").fadeIn();

Answer

Its because your query is getting both the elements. $('#branch1 ul') returns them both. Use this to get just the first one:

            var a= jQuery("#branch1>ul")
             a.fadeIn();
Comments