jQueryUI вложенный аккордеон работает только на первом под-списке

Я работаю на сайте, который имеет динамически генерируемый FAQ, и я пытаюсь заставить вложенные аккордеоны работать. Проблема в том, что только первая коллекция вопросов принимает класс ui-accordion.

Вот мой код.: http://jsfiddle.net/SmFdt/

(я просто скопировал источник страницы и удалил большую часть текста)

Что я делаю не так?

2 2
jquery-ui-accordion

2 ответа:

У вас есть один и тот же идентификатор, назначенный нескольким дивам. Попробуйте вместо этого сделать следующее:

HTML 

<h1>Frequently Asked Questions</h1>

<div id="faqs-container" class="accordian">
    <h3><a href="#">One</a></h3>
    <div class="accordian">
        <h3><a href="#">A</a></h3>
        <div>AAAAAAAAAA</div>
        <h3><a href="#">B</a></h3>
        <div>BBBBBBBBBB</div>
    </div>
    <h3><a href="#">Two</a></h3>
    <div class="accordian">
        <h3><a href="#">A2</a></h3>
        <div>AAAAAAAAAA2</div>
        <h3><a href="#">B2</a></h3>
        <div>BBBBBBBBBB2</div>
    </div>
</div>

JavaScript 

$("div.accordian").accordion({
    autoHeight: false,
    collapsible: true,
    active: false
});

Ссылка на пример: http://jsfiddle.net/SmFdt/1/

14

Попробуйте это http://jsfiddle.net/SmFdt/3/

Причина, по которой он не работал, заключалась в том, что вы использовали один и тот же идентификатор для нескольких дивов. Я изменил идентификаторы на классы.

На боковой ноте у вас есть много кода для отображения аккордеона. Возможно, вы захотите рассмотреть возможность сокращения некоторого кода. (например, нет необходимости в <p> внутри <div>. Вы можете управлять интервалом, используя свойства CSS margin и padding.)

0