Collapsible List - Need to make a collapse all button

Question

I am working on making an unordered list collapsible. I have created a hamburger/ collapsible/ accordian menu already. However, I want to add a "Expand All/ Collapse All" button on the top. Can someone help me with the code?

function expandCollapse() {
  var theHeaders = document.querySelectorAll('.expandCollapse h2'),
    i;

  for (i = 0; i < theHeaders.length; i++) {

    var thisEl = theHeaders[i],
      theId = 'panel-' + i;

    var thisTarget = thisEl.parentNode.querySelector('.panel');

    if (!thisTarget) {
      continue;
    }

    // Create the button
    thisEl.innerHTML = '<button aria-expanded="false" aria-controls="' + theId + '">' + thisEl.textContent + '</button>';

    // Create the expandable and collapsible list and make it focusable
    thisTarget.setAttribute('id', theId);
    thisTarget.setAttribute('hidden', 'true');
  }

  // Make it click
  var theButtons = document.querySelectorAll('.expandCollapse button[aria-expanded][aria-controls]');

  for (i = 0; i < theButtons.length; i++) {

    theButtons[i].addEventListener('click', function(e) {
      var thisButton = e.target;
      var state = thisButton.getAttribute('aria-expanded') === 'false' ? true : false;

      thisButton.setAttribute('aria-expanded', state);

      document.getElementById(thisButton.getAttribute('aria-controls')).toggleAttribute('hidden', !state);

    });
  }
}
expandCollapse();

<div class="expandCollapse">
  <section id="teams">
    <h2>Fruits</h2>
    <div class="panel">
      <ul>
        <li>
          <a href="bio/bio1.html"> Mango</a>
        </li>
      </ul>
    </div>
  </section>
  <section>
    <h2>Ghadarite</h2>
    <div class="panel">
      <ul>
        <li>
          <a href="bio/bio2.html">Potato(c. 1864-1928)</a>
        </li>
        <li>
          <a href="bio/bio3.html">Onions(c. 1884-1962)</a>
        </li>
        <li>
          <a href="bio/bio4.html"> Pepper (1886-1921)</a>
        </li>
        <li>
          <a href="bio/bio5.html">Gobind Behary Lal (1889-1982)</a>
        </li>
      </ul>
    </div>
  </section>
</div>

Let's say if I add a button on the top of the list, how do I code the code the functionality of the button so that it expands all collapsed panels or collapses all expanded panels?

Answer 1

The easiest answer:

Add a button: <button onclick="toggleExpandCollapse();">Expand/Collapse</button>

Add this JS:
function toggleExpandCollapse() { document.querySelectorAll('.panel').forEach(function(el) { el.classList.toggle('hidden'); }); }

And lastly, add this css: .hidden {display:none;}

And you are done!