Hi,

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

Code:
<ul>
	<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>
		</ul>
	</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>
		</ul>
	</li>
	<li><a href="#">5</a></li>
</ul>
and this is my jquery,

Code:
$(document).ready(function(){

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

			$(this).toggle(
				function (){
					$("ul").removeClass("showme");
					$(this).siblings(".selected").addClass("showme");
					//$(this).next().css({display: "block"});
				},
				function (){
					$(this).siblings(".selected").removeClass("showme");
					//$(this).next().css({display: "none"});
			});

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

Code:
ul > li > ul {
		display:none;
	}
	
	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,
http://lauthiamkok.net/tmp/jquery/toggle/

Many thanks,
Lau