ファウンデーション6アコーディオンのやり方は？

Question

誰かがFoundation 6アコーデオンを手伝ってくれますか？私は基本的にドキュメントからコードをコピーして貼り付けましたが、それはとても紛らわしいものです。ここで間違っていることは分かりません。ドキュメントから

HTML：

<ul class="accordion" data-accordion id="accordion"> 
    <li class="accordion-item is-active" data-accordion-item> 
    <a role="tab" href="#" class="accordion-title">Accordion 1</a> 
    <div class="accordion-content" data-tab-content role="tabpanel"> 
     Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
    </li> 
    <li class="accordion-item" data-accordion-item> 
    <a role="tab" href="#" class="accordion-title">Accordion 2</a> 
    <div class="accordion-content" data-tab-content role="tabpanel"> 
     Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
    </li> 
    <li class="accordion-item" data-accordion-item> 
    <a role="tab" href="#" class="accordion-title">Accordion 3</a> 
    <div class="accordion-content data-tab-content" role="tabpanel"> 
     Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
    </li> 
</ul> 

コードが働いていなかったので、私は彼らのウェブサイトを点検し、役割=「タブ」のようなものと自分のコードではなく、していたいくつかのデータ - *属性を追加しましたドキュメンテーション。

Javascriptを：

// $(document).foundation(); 
var el = document.getElementById("accordion"); 
var elem = new Foundation.Accordion(el, options); 

ので、それはそれで働いていなかったので、最初の行は、（それが常に必要であることを、私はちょうど自動的想定さ）コメントアウトされていますが、ドキュメントに記載されていません。私はそれが重複していると思いますか？

私はここにいくつかの他のSOの答えをチェックしてみましたが、彼らはもっと私を混同し、このような：Foundation 6 Accordion Not Working

はなぜ一度に2 jQuerysを使用して男だ?? !! ??

ここでは機能していないアコーディオンのCodepenリンクです：http://codepen.io/lukasdinh/pen/dXXOwz

Answer 1

あなたが

<div class="accordion-content data-tab-content" role="tabpanel"> 

を持って

サードアコーディオンタブにタイプミスがあり、それがあるべきでは

<div class="accordion-content" data-tab-content role="tabpanel"> 

また、あなたのjavascriptはinit基礎をする必要があります

$(document).foundation(); 

他の2行は、このcodepen