jquery - Vallenato アコーディオン: 複数のアコーディオンをネストする

Question

アコーディオン内にアコーディオンを入れ子にしようとしていますが、助けが必要です。数回試行した後、ネストされたアコーディオンになりましたが、クリックすると、開くのではなく、閉じて最初に戻ります。どんな助けでも大歓迎です。

マークアップの例

<div id="accordion-container"> 
 <h2 class="accordion-header">Section 1</h2> 
 <div class="accordion-content"> 
      <div id="accordion-container"> 
 <h2 class="accordion-header">Nested1 1</h2> 
 <div class="accordion-content"> 
      <p>Nested 1 Content</p> 
 </div> 
 <h2 class="accordion-header">Nested 2</h2> 
 <div class="accordion-content"> 
      <p>Nested 2 Content</p> 
 </div> 
 </div> 
 </div> 
 <h2 class="accordion-header">Section 2</h2> 
 <div class="accordion-content"> 
      <p>Section 2 Content</p> 
 </div> 
 </div>

そして、jquery

$(document).ready(function()
{
//Add Inactive Class To All Accordion Headers
$('.accordion-header').toggleClass('inactive-header');

//Set The Accordion Content Width
var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });

//Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-      header');
$('.accordion-content').first().slideDown().toggleClass('open-content');

// The Accordion Effect
$('.accordion-header').click(function () {
    if($(this).is('.inactive-header')) {
        $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
    }

    else {
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
    }
});

return false;
    });