Â« Â»

One more JavaScript code example to show/hide a layer every time the users click the specified text link. In live demo of this JavaScript code example, the script used to toggle the comments in a post.

Label: JavaScript toggle div, JavaScript display toggle, toggle in JavaScript, JavaScript toggle function, JavaScript show hide, JavaScript div layer, JavaScript popup layer

For the best in Cable TV, High Speed Internet & Home Phone Service order Comcast Deals and save money.

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

div.quote
{
	margin-left: 25%;
	padding: 10px;
	background-color: #FFCF31;
	border: 1px solid #00009C;
	width: 450px;
	text-align: left;
}

div.quote p {
	font-size: .8em;
	margin: 0px 0px 0px 0px;
}

div#commentForm {
	display: none;
	margin: 0px 20px 0px 20px;
	font-family: Arial, sans-serif;
	font-size: .8em;
}

a.commentLink {
 	font-family: Arial, sans-serif;
	 font-size: .9em;
}
</style>

Copy All x2

<script type="text/javascript">
// Created by: Justin Barlow | http://www.netlobo.com
// This script downloaded from www.JavaScriptBank.com

function toggleLayer(whichLayer) {
  var elem, vis;
  if(document.getElementById) // this is the way the standards work
    elem = document.getElementById(whichLayer);
  else if(document.all) // this is the way old msie versions work
      elem = document.all[whichLayer];
  else if(document.layers) // this is the way nn4 works
    elem = document.layers[whichLayer];
  vis = elem.style;
  // if the style.display value is blank we try to figure it out here
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
</script>

Copy All x2

<!--
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<div class="quote">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent porttitor luctus quam. Pellentesque diam libero, feugiat quis, porttitor sagittis, suscipit dignissim, pede. Duis dapibus mauris at enim. Morbi vehicula turpis nec massa.</p>
<p style="text-align: right;"><a class="commentLink" title="Add a comment to this entry" href="javascript:toggleLayer('commentForm');">Add a comment</a>

<div id="commentForm">
<form id="addComment" action="" method="get">
 	<p>Name:<br>
	 <input name="name"><br>
	 Comment:<br>
	 <textarea rows="3" cols="40" name="comment"></textarea><br>

	 <input name="submit" value="Add Comment" type="submit"> <input onclick="javascript:toggleLayer('commentForm');" name="reset" value="Cancel" type="reset"></p>
</form>
</div>

</div>