JSFiddle - React, Tailwind, and code Playground

by Konstantin Rouda

HTML

<button class="expander-btn">
click me
</button>

CSS

BODY {
  text-align: center;
}

BUTTON {
  width: 40px;
  border: 1px solid #000;
  border-radius: 5px;
 -moz-transition: width .3s;
 -o-transition: width .3s;
 -webkit-transition: width .3s;
  transition: width .3s;
}

BUTTON.expanded {
  width: 100px;
}

JavaScript

var buttons = document.getElementsByClassName("expander-btn");

for(var i = 0, len = buttons.length; i < len; i++) {
   buttons[i].addEventListener("click", addClass, false);
};

function addClass() {
     if(this.className.indexOf("expanded") === -1) {
        this.className = "expanded";
     } else {
        this.className = "";
     }
}