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?

If you only want a basic hide/show functionality, I would suggest to go with `
` https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details — Shoaib Ahmed, Aug 29 '21 at 08:55
I could use this too. But my only concern is how do I open or close all
tags on a click of a button? — Sasha, Aug 30 '21 at 07:30
something similar is answered here, you can use that: https://stackoverflow.com/q/16751345/14851894 — Shoaib Ahmed, Aug 30 '21 at 08:11

PersonWhoIsStuck · Answer 1 · 2021-08-30T13:31:09.730

0

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!

edited Aug 30 '21 at 13:31

answered Aug 29 '21 at 11:14

PersonWhoIsStuck

133
1
7

I followed the exact steps but when I click the button my entire list is hidden (including the headings) – Sasha Aug 30 '21 at 07:14
@Sasha I have edited the answer, please look at it again. – PersonWhoIsStuck Aug 30 '21 at 13:31
Great, that does collapse the two/ three list item that I opened one by one. But there are two issues still. When I click on it to expand all the list items it only opens up the list items that were collapsed (the two/ three I opened previously). The other is that the buttons are triangular bullets that change angle when the the list is expanded. If I click on the expand/collapse button it does not change the button since it's potentially just hiding the text – Sasha Aug 30 '21 at 15:57
@Sasha you can edit your existing code to toggle the class ".hidden". – PersonWhoIsStuck Sep 01 '21 at 14:18

Collapsible List - Need to make a collapse all button

1 Answers1