JQuery UI вложенный аккордеон с содержимым в аккордеоне верхнего уровня

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

это макет того, что я пытаюсь чтобы это выглядело как Фото Макет

мой текущий 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 начинает захватывать элемент fist html после заголовка, чтобы построить аккордеон.

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

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

});

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

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