How to exclude nested accordion in expand/collapse all function

342 views Asked by At

I need to collapse/expand the root acordion is #accordion1 using folowing code. But at the same time I have to ignore/exclude the nested accrodion is #nestedAccordion.

I cannot get working properly it. Please, help.

function ExpandAll() {
        $('.ui-accordion-header').not('#nestedAccordion').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({ 'aria-selected': 'true', 'tabindex': '0' });
        $('.ui-accordion-header .ui-icon').not('#nestedAccordion').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
        $('.ui-accordion-content').not('#nestedAccordion').addClass('ui-accordion-content-active').attr({ 'aria-expanded': 'true', 'aria-hidden': 'false' }).show();
    }

    function CollapseAll() {
        $('.ui-accordion-header').not('#nestedAccordion').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({ 'aria-selected': 'false', 'tabindex': '-1' });
        $('.ui-accordion-header .ui-icon').not('#nestedAccordion').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
        $('.ui-accordion-content').not('#nestedAccordion').removeClass('ui-accordion-content-active').attr({ 'aria-expanded': 'false', 'aria-hidden': 'true' }).hide();
    }

Html

<div id="accordion1">
  <h3>Section 1</h3>
  <div>
   <div id="nestedAccordion">
    <h3>Section A</h3>
    <div>
       Text... 
    </div>
    <h3>Section B</h3>
    <div>
       Text... 
    </div>
   </div>     
  </div>
  <h3>Section 2</h3>
  <div>    
    Text...       
  </div>
</div>
0

There are 0 answers