View Full Version : jquery: toggling the sibling

08-06-2010, 05:30 PM

I want to toggle the next sibling of a link in a list like this,

<li><a href="#">1</a></li>
<li><a href="#">2</a>
<ul class="selected">
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
<li><a href="#">2.3</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a>
<ul class="selected">
<li><a href="#">4.1</a></li>
<li><a href="#">4.2</a></li>
<li><a href="#">4.3</a></li>
<li><a href="#">5</a></li>

and this is my jquery,


$("a").each(function () {
if ( $(this).siblings().size() > 0)
$(this).append("<span class='has-child'>has child</span>");

function (){
//$(this).next().css({display: "block"});
function (){
//$(this).next().css({display: "none"});


$('ul > li > ul > li:last-child > a').css('background','yellow');


the css,

ul > li > ul {

ul > li:hover ul{
display: block;
.showme {
display: block;

first of all, it seems fine - I can toggle the targeted sibling, but why after the first toggle at any parent, I have to click twice sometime to hide other siblings when I click/ toggle at the current parent?

here is the live site if I am not explaining it clearly,

Many thanks,