VwZjaXw

index.html

<button id="click-1">
  Test
</button>

<div class="drawer hide">
  <button class="btn" id="red">Red</button>
  <button class="btn" id="green">Green</button>
  
</div>

script.babel

document.getElementById("click-1").addEventListener("click", function() {
  const test = document.getElementsByClassName("drawer")[0];
  // console.log(test.classList);
  console.log(test.classList[1]);
  if (test.classList[1] === "hide") {
    test.classList.remove("hide");
  } else {
    test.classList.add("hide");
  }
});

const btns = document.getElementsByClassName('btn');
console.log(btns.length);
for (let i = 0; i < btns.length; i+=1) {
  document.getElementsByClassName('btn')[i].addEventListener('click', function() {
  alert();
});
}

style.scss

.drawer {
  &.hide {
    display: none;
  }
}

vwzjaxw.markdown

VwZjaXw

A Pen by Jeff Smykil on CodePen.

License.