<div id="page">
  <div class="clearfix">
    <h3><code>without delay</code></h3>
    <div class="box lime trans-ease"></div>
    <h3><code>with 500ms delay</code></h3>
    <div class="box lime trans-ease delay-500"></div>
  </div>
  <div class="clearfix text-center control-bar">
    		<button id="btn">Toggle All</button>
  	</div>
</div>
#page {
  width: 100%;
}

.control-bar {
  bottom: 0;
  left: 0;
  padding: 24px;
  position: fixed;
  right: 0;
}

h3 {
  font-size: 10px
}

#btn {
  padding: 8px 24px;
  border-radius: 4px;
  border: none;
  background: orange;
  color: white;
}

#page {
  padding: 24px;
}

.box {
  width: 50px;
  height: 50px;
  margin-bottom: 24px;
}

.box:hover,
.box.active {
  width: 100%;
}

.lime {
  background-color: lime;
}

.trans-ease {
  transition: 1s ease width;
}

.delay-500 {
  transition-delay: .5s
}
var btnsActive = false;

var btn = document.getElementById("btn");

btn.addEventListener("click", onBtnClick);

function onBtnClick() {

  console.log("button click");

  if (!btnsActive) {
    for (var i = 0; i < document.querySelectorAll(".box").length; i++) {
      var box = document.querySelectorAll(".box")[i];
      box.classList.add("active");
    }
  } else {
    for (var i = 0; i < document.querySelectorAll(".box").length; i++) {
      var box = document.querySelectorAll(".box")[i];
      box.classList.remove("active");
    }
  }

  btnsActive = !btnsActive;
}

External CSS

  1. https://codepen.io/flourish86/pen/MKNzVz/

External JavaScript

This Pen doesn't use any external JavaScript resources.