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>