Я пытаюсь создать меню навигации, которое содержит несколько уровней организации. Я создаю вложенный jQuery UI Accordion, который прекрасно работает, если весь мой контент находится в самом низком уровне (самом глубоком) гнезде аккордеона. Проблема в том, что некоторые элементы будут иметь контент и суб-аккордеон. Если я помещу какой-нибудь текст в верхнюю часть гармошки, он будет выглядеть великолепно ... но как только я оберну его тегами, он разрушит вложенную гармошку

Вот макет того, что я пытаюсь заставить его выглядетьФото макет

Мой текущий HTML

    <div id="faqs-container" class="accordian">
    <h3><a href="#">One</a></h3>

   <div class="accordian">
           I really want a list here!
        <h3><a class=href="#">A</a></h3>
        <div>
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
            </div>
        <h3><a href="#">B</a></h3>
        <div>    
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
       </div>
    </div>
    <h3><a href="#">Two</a></h3>
    <div class="accordian">
         <ul>
                <li>But They</li>
                <li>Do Not</li>
                <li>Work</li>
            </ul>
        <h3><a href="#">A2</a></h3>
        <div>
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
        </div>
        <h3><a href="#">B2</a></h3>
        <div>
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
        </div>
    </div>
</div>

Jquery

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

    });

Выполнение кода, подобного этому, создает хороший вложенный аккордеон для первого раздела, но второй раздел отображает неправильно. Похоже, что jQuery начинает захватывать элемент histml fist после заголовка, чтобы создать аккордеон.

Я указал опцию заголовка при вызове accordian следующим образом

$("div.accordian").accordion({
    autoHeight: false,
    collapsible: true,
    active: false,
    header: 'h3'

});

Это приближается к желаемому эффекту. Список отображается в правильном месте, но вложенный аккордеон во втором разделе не работает.

у меня естьскрипка настроить