'Open All' вложенные аккордеоны jQuery

Question

Я пытаюсь открыть все вложенные аккордеоны внутри аккордеона jQuery. Образец кода -

Я хочу, чтобы иметь возможность открывать только вложенные аккордеоны (вложенные заголовки), а не все аккордеоны (заголовок 2). Также как я могу изменить кнопку «Развернуть все» до «Свернуть все», а затем закрыть вложенные аккордеоны при повторном нажатии?

<div class="accordion"> 
    <h3>Heading 1</h3> 
    <div><button type="button" class="expand2nd">Expand all</button> 
     <div class="accordion"> 
     <h3>Nested Heading</h3> 
      <div>Nested Title 1</div> 
     <div class="accordion"> 
     <h3>Nested Heading 2</h3> 
      <div>Nested Title 2</div> 
     <div class="accordion"> 
     <h3>Nested Heading 3</h3> 
      <div>Nested Title 3</div> 
    </div> 
    <h3>Heading 2</h3> 
    <div>content<div> 
</div> 

$(".expand2nd").click(function (event) { 
    $('.accordion .ui-accordion-header:not(.ui-state-active)').nextAll(':has(.accordion .ui-accordion-header)').slideDown(); 

    return false; 
}); 

Любая помощь очень ценится. Спасибо,

Answer 1

Не нужно объявлять класс аккордеона во всех ваших дочерних элементах, просто используя первый признанный класс аккордеона, это позволит jquery манипулировать ими. Проверьте пример https://jqueryui.com/accordion/, он делает то, что вы конкретно хотите выполнить.