Я хочу скрыть любые видимые элементы span, если они видны, и снова переключить их, если элемент щелкнут
<div class="item">
<a href="">element1</a> <span>span1</span>
<br>
</div>
<div class="item">
<a href="">element2</a> <span>span2</span>
<br>
</div>
<div class="item">
<a href="">element3</a> <span>span3</span>
<br>
</div>
<div class="item">
<a href="">element4</a> <span>span4</span>
<br>
</div>
JS
$('.item span').hide();
var all_spans = $('.item a').parent().find('span');
$('.item a').click(function(e) {
e.preventDefault();
// hide all span
all_spans.hide();
$this = $(this).parent().find('span');
// here is what I want to do
if ($this.is(':hidden')) {
$(this).parent().find('span').show();
} else {
$(this).parent().find('span').hide();
}
});
живой пример http://jsfiddle.net/BGSyS/
проблема возникает, когда я нажимаю, например, 'element 1
' 'span1
' все еще отображается, и я хочу переключить этот