Shjow/Hide DIV via Javascript

by Matthew Schenker

HTML

<button id="toggle">TOGGLE</button>
<div id="content">This is the toggled content, which can appear, or not appear, as needed...</div>
<div class="other-content">
This is some other content, which appears below the toggled content, allowing the toggled content to play nicely with anything else!
</div>

CSS

#content{
  display:none;
  width: 250px;
  margin-bottom: 20px;
}

button {
	border: none;
	padding: 5px;
}

.other-content {
}

JavaScript

var toggle  = document.getElementById("toggle");
var content = document.getElementById("content");

toggle.addEventListener("click", function(){
  content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none";
}, false);