zurb-foundationaccordionzurb-foundation-6

Zurb Foundation Accordion not expanding


I am using Foundation 6.7.4.

I am trying to set up an accordion like the one in their example here https://get.foundation/sites/docs/accordion.html

I have my accordion set up as such:

<div class="grid-x">
        <div class="medium-12 cell">
            <ul class="no-bullet accordion" data-accordion data-allow-all-closed="true" data-multi-expand="true">

              <li class="accordion-item" data-accordion-item>
                 <a href="#" class="accordion-title">
                  My Title
                 </a>
                 <div class="accordion-content" data-tab-content>
                   My content
                 </div>
               </li>
           </ul>
         </div>
      </div>

When I click the A tag I can see the Accordion expand for a fraction of a second before closing. I can also see the CSS classes and attributes change in the inpector.

But I'm unsure why none of these are sticking and what's causing the accordion to revert its's self.

Would anyone know why?


Solution

  • Turned out this was because I had 2 foundation.js files referenced.