Show/Hide a DIV

Justin Barlow Feb 29, 2008

General

Showing and hiding a DIV using a link can be very useful when it's not necessary to always display information on the Web page. For example, this technique can be used for posting comments on a blog. That way you don't need to use a popup window or a separate page.

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.

Add a comment

Notes

Created by: Justin Barlow
Web Site: http://www.netlobo.com
Posted: February 29, 2008

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: showHideDiv.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Justin Barlow | http://www.netlobo.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';
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

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

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;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="showHideDiv.js"></script>

Body

Paste this code into the BODY section of your HTML document


<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>

Leave a Response

(3 comments)

Thanks. It's working now.

Lee Oct 31, 2008

Is it possible to make the default toggle position = "Hidden".[br /]When page is opened the text box etc is visible and I feel should not be[br /]Thanks

Terry Ledwith Mar 3, 2008

I had to copy the source code, and paste it into my own sheets. The link is broken to e-mail it to myself.

lawrence farell Feb 29, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details