CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Daniel9
Daniel9

Reputation: 1

'Open All' nested jQuery accordions

I'm trying to open all nested accordions inside a jQuery accordion. Sample code -

I want to be able to open just the Nested accordions(Nested Heading) and not all accordions (Heading 2). Also how would I change the button from 'Expand all' to 'Collapse all' and then close the nested accordions when clicked again?

    <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;
});

Any help is greatly appreciated. Thanks,

Upvotes: 0

Views: 166

Answers (1)

hjm
hjm

Reputation: 1953

There is no need to declare a class of accordion in all of your child elements, just using the first accordion class declared will allow jquery to manipulate them. Check out https://jqueryui.com/accordion/ example, it does what you specifically are looking to accomplish.

Upvotes: 1

Related Questions