title: How to do Foundation 6 accordion?
body: <p>Can someone help me make Foundation 6 accordion? I basically copied and pasted the code from the documentation, but it's so confusing. I don't know what I am doing wrong here.</p>
  
  <p>HTML from docs:</p>
  
  <pre><code>&lt;ul class="accordion" data-accordion id="accordion"&gt;
    &lt;li class="accordion-item is-active" data-accordion-item&gt;
      &lt;a role="tab" href="#" class="accordion-title"&gt;Accordion 1&lt;/a&gt;
      &lt;div class="accordion-content" data-tab-content role="tabpanel"&gt;
        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.
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="accordion-item" data-accordion-item&gt;
      &lt;a role="tab" href="#" class="accordion-title"&gt;Accordion 2&lt;/a&gt;
      &lt;div class="accordion-content" data-tab-content role="tabpanel"&gt;
        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.
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="accordion-item" data-accordion-item&gt;
      &lt;a role="tab" href="#" class="accordion-title"&gt;Accordion 3&lt;/a&gt;
      &lt;div class="accordion-content data-tab-content" role="tabpanel"&gt;
        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.
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Because the code was not working, I inspected their website and added things like role="tab" and some data-* attributes that were in their code but not in the documentation.</p>
  
  <p>Javascript:</p>
  
  <pre><code>// $(document).foundation();
  var el = document.getElementById("accordion");
  var elem = new Foundation.Accordion(el, options);
  </code></pre>
  
  <p>The first line is commented out because it was not working with it (I just automatically assumed, that it is always required), but it is not mentioned in the docs, so.. I guess it's redundant there?</p>
  
  <p>I tried to check some other SO answers here, but they confuse me even more, like this: <a href="https://stackoverflow.com/questions/34673346/foundation-6-accordion-not-working">Foundation 6 Accordion Not Working</a></p>
  
  <p>Why is the guy using 2 jQuerys at the time??!!??</p>
  
  <p>Here's a Codepen link of not functioning accordion: <a href="http://codepen.io/lukasdinh/pen/dXXOwz" rel="nofollow noreferrer">http://codepen.io/lukasdinh/pen/dXXOwz</a></p>