Toggle visibility -Vanilla JS

Will want to use this technique for tables. click on tr with certain class will hide trs below it with a certain class OR up to a tr with a certain class.

by katalin_2003

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
  </head>

  <body>
    <div id="box" class="box"></div>
    <button id="toggle-btn">TOGGLE VISIBILITY</button>
  </body>

</html>

CSS

.box {
  background: goldenrod;
  width: 300px;
  height: 300px;
  margin: 30px auto;
  transition: all 0.3s linear;
  transition-property: opacity, height, margin;
  display: block;
  position: relative;
}

.hidden {
  opacity: 0;
  height: 0px;
  margin: 0 auto;
}

button {
  display: block;
  margin: 0 auto;
}

JavaScript

var toggleButton = document.getElementById('toggle-btn');
var box = document.getElementById('box');

toggleButton.addEventListener('click', function() {
  box.classList.toggle('hidden');
});