Переключатель слайда и несколько элементов

Question

У меня возникли проблемы с простым slidetoggle, который я должен применить на нескольких элементах <li>.

Пример:

<ul id="serv"> 
    <li id="01">Assistenza</li> 
    <li id="02">Riparazione</li> 
    <li id="03">Manutenzione</li> 
    <li id="04">Rifacimento Macchina</li> 
</ul> 

<div id="box01"></div> 
<div id="box02"></div> 
<div id="box03"></div> 
<div id="box04"></div> 

теперь я просто хочу, когда я нажимаю на 01 box01 шоу, 02 box02 шоу .. и т.д .. Так

<script> 
    $('#01').click(function() { 
    $('#box01').slideToggle() 
    }) 
</script> 

В этом случае я должен повторите это для каждого id. А если у меня много элементов? Есть ли способ упростить этот процесс, чтобы «писать меньше и делать больше»?

Большое спасибо за вашу драгоценную помощь.

Answer 1

Попробуйте это:

$('li').click(function() { 
    $('#box'+$(this).attr('id')).slideToggle() 
}) 

jsFiddle example

Answer 2

<ul id="serv"> 
    <li class="toggler" id="01">Assistenza</li> 
    <li class="toggler" id="02">Riparazione</li> 
    <li class="toggler" id="03">Manutenzione</li> 
    <li class="toggler" id="04">Rifacimento Macchina</li> 
</ul> 

$('.toggler').click(function() { 
    $('#box' + $(this).attr('id')).slideToggle() 
} 

Чтобы добавить функциональные возможности аккордеона:

$('.toggler').click(function() { 
    $('li').slideUp(); 
    $('#box' + $(this).attr('id')).slideToggle() 
}