tabs - Foundation のタブ内でアコーディオンを使用する

Question

Zurb Foundation 4 (最新リリース) を使用しており、タブを使用してレイアウトを作成しようとしています。各タブには、アコーディオン レイアウトのセクションが含まれています。基礎セクションのドキュメントと例

タブ:

<div class="section-container tabs" data-section="tabs">
  <section>
    <p class="title" data-section-title><a href="#">Section 1</a></p>
    <div class="content" data-section-content>
      <p>First Accordion-ed content goes here.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#">Section 2</a></p>
    <div class="content" data-section-content>
      <p>Second Accordion-ed content goes here.</p>
    </div>
  </section>
</div>

アコーディオン：

<div class="section-container accordion" data-section="accordion">
  <section>
    <p class="title" data-section-title><a href="#">Section 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#">Section 2</a></p>
    <div class="content" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

私が見る結果は、各セクション（タブまたはアコーディオン）が常にタブであり、動作が壊れていることです。

これはこの他の質問とは関係ありません

タブを含むタブの例を見ることができますが、セクションが混在しているものはありません（たとえば、垂直ナビゲーションのタブ、または水平ナビゲーションのアコーディオン）。

誰でもそれを機能させることができますか？可能であれば、基盤フレームワーク以外のツールを使用せずに。

よろしくお願いします。

編集：

お気軽にこちらまたはこちらに返信してください。正しい回答に相互リンクします。

編集 2:未解決のGitHubで既に提出された問題が見つかりました。