toggleClass

by kenji morita

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="target" class="foo-after" onClick="toggleStyle()">
  click here!
</div>

CSS

#target {
  padding: 20px;
  text-align: center;
}

.foo-after {
  background: #e3e3e3;
  width: 200px;
}

.foo-before {
  background: #3e3e3e;
  width: 200px;
  color: #fff;
}

JavaScript

var target = document.getElementById('target');
target.onclick = function toggleStyle() {
  this.classList.toggle('foo-after');
  this.classList.toggle('foo-before');
}