PHPTutorials.co - How to Show / Hide a DIV

Comments + Likes

Programming / Javascript

How to Show / Hide a DIV

This Tutorials shows you to show / hide a div using Javascript. This is quite a simple tutorial.

How to Show / Hide a DIV was posted by listylister and has had 427 view(s) with an overall rating of 4

Posted by listylister

Their Website http://www.phptutor...

This Tutorial has had 427 Views

Showing / Hiding a DIV is very easy. The following function should be inserted just before the end body tag on your page.




&amp;lt;script language="javascript" type="text/javascript"&amp;gt;



function showhide(ID){



var tmp = document.getElementById(ID);



if (tmp.style.display=='none'){



tmp.style.display = '';



}else{



tmp.style.display = 'none';



}



}



&amp;lt;/script&amp;gt;

The following function can then be called to toggle the divs display status:




&amp;lt;div id="helloworld"&amp;gt;Hello World&amp;lt;/div&amp;gt;

&amp;lt;div onclick="showhide('helloworld');"&amp;gt;Show / Hide&amp;lt;/div&amp;gt;

Hope this helps you out

created on 20/12/2009 @ 15:57, last updated on 30/05/2010 @ 16:00