<p>
  <div 
 class="btn" onclick="toggle(document.querySelector('.toggle'));">Toggle</div>
</p>
<div class="toggle block">Hello World!</div>
.btn {
  border-radius: 4px;
  width: 50px;
  height: 20px;
  background-color: white;
  border: 1px solid #dadada;
  padding: 5px;
}
.toggle {
  overflow: hidden;
  transition: height .4s, padding .4s;
}

.toggle.is_hidden {
  height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.block {
  background: #fdad99;
  color: #fff;
  font: bold 20px sans-serif;
  width: 300px;
  text-align: center;
  padding: 50px;
  border-radius: 5px;
}
function hasClass(el, className) {
  return el.classList ? el.classList.contains(className) : new RegExp('\\b' + className + '\\b').test(el.className);
}

function addClass(el, className) {
  if (el.classList) el.classList.add(className);
  else if (!hasClass(el, className)) el.className += ' ' + className;
}

function removeClass(el, className) {
  if (el.classList) el.classList.remove(className);
  else el.className = el.className.replace(new RegExp('\\b' + className + '\\b', 'g'), '');
}

function toggle(el) {
  hasClass(el, 'is_hidden') ? removeClass(el, 'is_hidden') : addClass(el, 'is_hidden');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.