black12 black12 - 3 months ago 19
jQuery Question

Jquery onclick show li, hide ALL syblings li and children element

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
ul ul
{
display: none;
}
ul li
{
list-style-type: none;
}

</style>
<script type="text/javascript">
$(document).ready(function () {
$('ul li').addClass('reveal');
$('.reveal').live('click', function (event) {
$(this).children('ul').slideDown();
$(this).siblings('li').children().slideUp();

});
});
</script>




<ul>
<li>a
<ul>
<li>inner1
<ul>
<li>bonner1
<ul>
<li>donner1<ul>
<li>konner1</li>
<li>konner2</li>
</ul>
</li>
<li>donner2</li>
</ul>
</li>
<li>bonner2</li>
</ul>
</li>
<li>inner2</li>
</ul>
</li>
<li>b
<ul>
<li>inner3</li>
<li>inner4</li>
</ul>
</li>
</ul>


I want to close all sybling inner elements on li click event. This code works, but not in a desired way.It close sybling element but not and child elements inside of sybling element. How can I achieve that?

Answer

What I think you are looking for is:

$(this).siblings('li').find('ul').slideUp();

That will slideup all <ul /> elements nested within the sibling <li />s.

Is that what you want?

Comments