Toggle class - example

by Lio Fleishman

HTML

<button id="handle">Fade</button>
 <br>
 <br>
 <div id="box">apply</div>

CSS

div#box {
width: 100px;
heigth: 100px;
padding: 10px;
background-color: #3498db;
color: #fff;
font-family: helvetica;
text-align: center;
opacity:1;
  transition: opacity 1s;
}

div#box.fade {
  opacity:0;
}

JavaScript

var box = document.getElementById('box');

document.getElementById('handle').onclick = function(){
    box.className = box.className ? '' : 'fade';
}