Как сделать аккордеон Foundation 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 просто должен инициализировать основание

$(document).foundation(); 

2 других линий не требуется

Смотреть это codepen