JavaScript Collapse-All/Show-All Toggle Button for Collapsible Divs

Question

I have some Collapsible divs on my website, here's one for example: http://dogs.bluskye.net/seeya/ (not me in the photo ;) ) using the following JavaScript/CSS & simplified html example below.

I have searched for a way to create a "collapse-all/show-all" button, but since I really don't know JavaScript, I'm having trouble using the examples I've seen with mine.

I've spent quite a bit of time modifying the current JavaScript/CSS I'm using, so I really don't want to scrap this for a different system - can someone help me create a button that when clicked can toggle between hide/show all based on the .inside div class I'm already using?

Thanks!!

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (!content.style.display || content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

.collapsible {
  background-color: #007784;
  color: #FFFFFF;
  cursor: pointer;
  width: 97%;
  border: 2px solid #000000;
  border-bottom: 0px;
  border-radius: 15px 15px 0px 0px;
  text-align: center;
  outline: none;
  font-size: 18px;
  font-weight: bold;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin-top: 3px;
  padding: 0px;
}

button.collapsible.active {
  border: 2px solid #000000;
  border-radius: 15px;
}

.collapsible:hover {
  background-color: #0066FF;
  border-bottom: 0px;
  border-radius: 15px 15px 0px 0px;
  margin-top: 3px;
}

.active {
  background-color: #007784;
  border-bottom: 0px;
  border-radius: 15px 15px 0px 0px;
  margin-top: 3px;
}

.inside {
  padding: 0;
  width: 97%;
  display: block;
  overflow: hidden;
  border-top: 0px;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  background-color: #FFFFFF;
  border-radius: 0px 0px 15px 15px;
}

/*unrelated*/
.trials {width:100%;}

<button type="button" class="collapsible">Standard Novice</button>
<div class="inside">
  <table class="trials" cellspacing="1" cellpadding="2px">
    <tr>
      <td width="33%">GSDCO</td>
      <td width="33%">BTCWWA</td>
      <td width="33%">PAC</td>
    </tr>
    <tr>
      <td width="33%">January 1, 2020</td>
      <td width="33%">January 1, 2020</td>
      <td width="33%">January 1, 2020</td>
    </tr>
  </table>
</div>

<button type="button" class="collapsible">Jumpers Novice</button>
<div class="inside">
  <table class="trials" cellspacing="1" cellpadding="2px">
    <tr>
      <td width="33%">PNWSSC</td>
      <td width="33%">MHDPC</td>
      <td width="33%">GSDCO</td>
    </tr>
    <tr>
      <td width="33%">March 1, 2020</td>
      <td width="33%">March 2, 2020</td>
      <td width="33%">March 3, 2020</td>
    </tr>
  </table>
</div>

Answer 1

Instead of using inline style:

.style.display = "none"

Use class:

.classList.toggle('hide');

.hide { display: none }

Demo

const col = document.querySelectorAll(".collapsible");

for (let c of col) {
  c.addEventListener("click", collapse);
}

function collapse(e) {
  this.classList.toggle("active");
  const content = this.nextElementSibling;
  content.classList.toggle('hide');
}

const all = document.querySelector(".all");

all.addEventListener('click', collapseAll);

function collapseAll(e) {
  const col = document.querySelectorAll('.collapsible');
  const con = document.querySelectorAll('.content');

  if (e.target.matches('.all')) {
    this.classList.toggle("active");

    col.forEach((button, index) => {
      if (e.target.matches('.active')) {
        button.classList.add('active');
        con[index].classList.remove('hide');
      } else {
        button.classList.remove('active');
        con[index].classList.add('hide');
      }
    });
  }
}

body {
  overflow-y: scroll;
  font: 900 18px/1.5 Verdana;
}

button {
  display: block;
  background-color: #007784;
  color: #FFF;
  cursor: pointer;
  width: 97%;
  border: 2px solid #000;
  border-radius: 15px;
  text-align: center;
  outline: none;
  margin: 3px auto 0;
  padding: 3px 7px;
  font: inherit;
}

.collapsible.active {
  border-radius: 15px 15px 0px 0px;
  border-bottom: 0px;
}

.collapsible:hover,
.all:hover {
  background-color: #0066FF;
}

.content {
  padding: 0;
  width: 96.25%;
  display: block;
  overflow: hidden;
  border: 2px solid #000;
  border-top: 0px;
  background-color: #FFF;
  border-radius: 0px 0px 15px 15px;
  margin: 0 auto;
  font: 500 16px/1.5 Arial;
}

.hide {
  display: none;
}

.trials {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0px;
}

td {
  width: 33%;
  padding: 1.5px;
  text-align: center;
}

.all::before {
  content: 'Show ';
}

.all.active::before {
  content: 'Hide ';
}

<button class="all active" type="button">All</button>
<button class="collapsible active" type="button">Novice</button>
<section class="content">
  <table class="trials">
    <tr>
      <td>GSDCO</td>
      <td>BTCWWA</td>
      <td>PAC</td>
    </tr>
    <tr>
      <td>January 1, 2020</td>
      <td>January 1, 2020</td>
      <td>January 1, 2020</td>
    </tr>
  </table>
</section>

<button class="collapsible active" type="button">Standard</button>
<section class="content">
  <table class="trials">
    <tr>
      <td>PNWSSC</td>
      <td>MHDPC</td>
      <td>GSDCO</td>
    </tr>
    <tr>
      <td>March 1, 2020</td>
      <td>March 2, 2020</td>
      <td>March 3, 2020</td>
    </tr>
  </table>
</section>