ネストされた折りたたみ可能なJSアコーディオンを作成するにはどうすればよいですか？

Question

これは私のアコーディオン用コードです。このアコーディオンにネストされたレベルを追加すると、ネストされたセクション内の異なるレベルを変更すると、ネストされたレベルが開いたままになりません。それはすべてを閉じます。

<!-- JS --> 
     <script type="text/javascript"> 
     $(document).ready(function($) { 
      $('#accordion').find('.accordion-toggle').click(function(){ 

      //Expand or collapse this panel 
      $(this).next().slideToggle('fast'); 

      //Hide the other panels 
      $(".accordion-content").not($(this).next()).slideUp('fast'); 

      }); 
     }); 
     </script> 

     <!-- CSS --> 
     <style> 
     .accordion-toggle {cursor: pointer;} 
     .accordion-content {display: none;} 
     .accordion-content.default {display: block;} 
     </style> 

     <!-- HTML --> 
     <div id="accordion"> 
     <h4 class="accordion-toggle">Accordion 1</h4> 
     <div class="accordion-content default"> 
      <p>Cras malesuada ultrices augue molestie risus.</p> 
     </div> 
     <h4 class="accordion-toggle">Accordion 2</h4> 
     <div class="accordion-content"> 
      <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
     </div> 
     <h4 class="accordion-toggle">Accordion 3</h4> 
     <div class="accordion-content"> 
      <p>Vivamus facilisisnibh scelerisque laoreet.</p> 
     </div> 
     </div> 

Answer 1

は、このコードを試してみてください。

$(document).ready(function($) { 
    $('#accordion .accordion-toggle').click(function(){ 

    $('.accordion-content').slideUp('fast'); 
    $(this).next('.accordion-content').slideDown('fast'); 

    }); 
});