jquery - スライドトグルと複数の要素

Question

<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

<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()
}

Answer 2

これを試して：

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

jsFiddle の例