I'm using jQuery Accordion UI in a non-traditional sense: I have the accordion nodes open and close independently. I'm also trying to use an "expand/collapse all" button, and that's where the issue is: it doesn't collapse any nodes which were opened by themselves.

How can I get the "expand/collapse all" to collapse all noses, even nodes which were opened by themselves?

Can this be done without significantly changing the HTML markup?

These two answers deal with an accordion that allows only one node open at a time: jQuery UI Accordion Expand/Collapse All and Jquery Accordion Expand All Collapse All

Fiddle: https://jsfiddle.net/d78h6g1c/

$(".accordion").accordion({
  collapsible: true,
  clearStyle: true,
  active: false,
})

$('.accordion-expand-collapse a').click(function() {
  $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideToggle();
  $(this).text($(this).text() == 'Expand all' ? 'Collapse all' : 'Expand all');
  $(this).toggleClass('collapse');
  return false;
});

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button ><a href="#">Expand all</a></button>

<div >
  <h3 >1. FAQ</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div >
  <h3 >2. FAQ</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>

<div >
  <h3 >3. FAQ</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>

CodePudding user response：

Slight rework in the handling to achieve the desired behavior.

The handling fires click on the h3 elements.

1. When the elements have the ui-accordion-header-collapsed css, call click() to expand them all.
2. When the elements have the ui-state-active css, call click() to collapse them all.

Try the runnable example below:

$(".accordion").accordion({
  collapsible: true,
  clearStyle: true,
  active: false,
})

$('.accordion-expand-collapse a').click(function() {
  
  if ($(this).text() == 'Expand all') {
      // Fire click on any that are already collapsed to expand.
      $('.accordion h3.ui-accordion-header-collapsed').click();
      $(this).text('Collapse all');
  } else {
      // Fire click on any that are already active to collapse.
      $('.accordion h3.ui-state-active').click();
      $(this).text('Expand all');
  }
  
  return false;
});

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<button ><a href="#">Expand all</a></button>

<div >
  <h3 >1. FAQ</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div >
  <h3 >2. FAQ</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>

<div >
  <h3 >3. FAQ</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>