изменил ваш HTML . элементы блока не могут быть встроенными, то есть <p>
и <ul>
не могут быть <span>
.
HTML
<ul id="links">
<li class="link-1">Title 1</li>
<li class="link-2">Title 2</li>
<li class="link-3">Title 3</li>
<li class="link-4">Title 4</li>
<li class="link-5">Title 5</li>
<li class="link-6">Title 6</li>
</ul>
<div id="panels">
<div class="panel-1">
<p>Title 1</p>
</div>
<div class="panel-2">
<p>Title 2</p>
</div>
<div class="panel-3">
<p>Title 3</p>
</div>
<div class="panel-4">
<p>Title 4</p>
</div>
<div class="panel-5">
<p>Title 5</p>
</div>
<div class="panel-6">
<p>Title 6</p>
</div>
</div>
JS
Что касается JS, мы привязываем только один обработчик - к родителю, используя .on()
. затем мы присваиваем номер каждой ссылке, которую мы извлечем во время клика. затем мы находим соответствующую панель и переключаем ее, скрывая все остальные, которые не совпадают.
$(function() {
$('#links').on('click','li',function() {
var itemNumber = this.className.split('-')[1];
$('#panels > div.panel-'+itemNumber).slideToggle();
$('#panels > div:not(.panel-'+itemNumber+')').hide('slow');
return false;
});
});
CSS
#links li{
display:inline-block;
padding: 10px;
background:#ccc;
margin-bottom:50px;
}
#panels > div{
padding: 10px;
background:red;
margin-bottom:50px;
display:none;
}