DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Toggle (show Or Hide) Div

  • submit to reddit
        Are you trying to find a way to hide and show your content? The demo below shows a simple yet elegant way of toggling your content and toggling the control text via Javascript and styling.

<script language="javascript"> 
function toggle() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if( == "block") { = "none";
		text.innerHTML = "show";
	else { = "block";
		text.innerHTML = "hide";
<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

<a href=""><strong>Eclipse</strong></a> and <a href=""><strong>Eclipse IDE</strong></a> tips.