Hide table rows until row with class..

WIP -

by katalin_2003

HTML

<table class="orders-table">
  <thead>
    <tr>
      <th>No.</th>
      <th>Co</th>
      <th>Ré</th>
      <th>Dé</th>
      <th>État</th>
      <th class="right-align">MT</th>
      <th class="right-align">Ma</th>
      <th class="right-align">% M</th>
      <th class="center-align">Date Doc.</th>
      <th class="center-align">Nat</th>
      <th class="center-align">GD</th>
    </tr>
  </thead>
  <tbody>
    <tr class="month-row">
      <td colspan="5">JANVIER - 4</td>
      <td colspan="1" class="right-align">111111</td>
      <td colspan="1" class="right-align">11111111</td>

      <td colspan="1" class="right-align">5%</td>

      <td colspan="3"></td>
    </tr>
    <tr class="data-row animated">
      <td class="center-align">1</td>
      <td>LGH</td>
      <td>0</td>
      <td>226</td>
      <td>Gagné</td>
      <td class="right-align">222222</td>
      <td class="right-align">2222222</td>
      <td class="right-align">5%</td>
      <td class="center-align">10 Jan 2021</td>
      <td class="center-align">CM</td>
      <td class="center-align">D</td>
    </tr>
    <tr class="data-row animated">
      <td class="center-align">2</td>
      <td>LGH</td>
      <td>0</td>
      <td>227</td>
      <td>Gagné</td>
      <td class="right-align">333333</td>
      <td class="right-align">33333333</td>
      <td class="right-align">5%</td>
      <td class="center-align">10 Jan 2021</td>
      <td class="center-align">CM</td>
      <td class="center-align">D</td>
    </tr>
    <tr class="data-row animated">
      <td class="center-align">3</td>
      <td>LGH</td>
      <td>0</td>
      <td>227</td>
      <td>Gagné</td>
      <td class="right-align">444444</td>
      <td class="right-align">33333333</td>
      <td class="right-align">5%</td>
      <td class="center-align">10 Jan 2021</td>
      <td class="center-align">CM</td>
      <td class="center-align">D</td>
    </tr>
    <tr class="data-row animated">
      <td class="center-align">4</td>
      <td>LGH</td>
    ...

CSS

* {
  font-family: sans-serif;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table,
td,
th {
  padding: 0.6em;
}

/* tr {
  opacity: 1;
} */

tr:nth-child(odd) {
  background-color: #F2F2F2;
}

tr.month-row {
  background-color: #6AA8FA;
  color: #FFFFFF;
}

tr.month-row:hover {
  cursor: pointer;
}

.hidden {
  animation: disappear;
  animation-iteration-count: 1;
  /* animation-duration: 0.4s; */
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

@keyframes disappear {
  0% {
    opacity: 1;
    font-size: 1em;
    display: table-row;
  }

  100% {
    opacity: 0;
    font-size: 0em;
    display: none;
  }
}

.animated {
  animation: appear;
  animation-duration: 0.4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes appear {
  0% {
    opacity: 0;
    font-size: 0em;
    display: none;
  }

  100% {
    opacity: 1;
    font-size: 1em;
    display: table-row;
  }
}

JavaScript

'use strict'
const month_rows = document.querySelectorAll(".month-row");

for (let i = 0; i < month_rows.length; i++) {
	month_rows[i].addEventListener('click', function() {

		// console.log("CLICKED ON " + (i+1));
		let next_sibling = this.nextElementSibling;

		while (next_sibling) {
			if(next_sibling.classList.contains('month-row')) {
				// stop the loop when reaching the next .month-row
				break;
			}
			// hide data-rows of clicked month-row
			next_sibling.classList.toggle('hidden');
      next_sibling.classList.toggle('animated');
			next_sibling = next_sibling.nextElementSibling;
		}
	});
}