Show, Hide or toggle your div visibility

A web designer is not very familiar with JavaScript always. Many a times he may be familiar with css and to very little degree to javascript but website creation takes a lot of efforts to make decision about javascript usage. There are few effects which a interactive website use and one of them is show/hide div or toggle div.

It is most common effect used in websites. There are many JavaScript frameworks on the Internet, you can download them and use free of cost. You can create this effect by using any of these frameworks. But there is a cost to using frameworks because in general a framework is more than 50kb and it could be crucial for heavy traffic sites.

I am explaining here how you can create this effect using few line of very simple JavaScript & css.

At first create a anchor to control the div and then define a div (id=”onoff”) which one you want to show or hide. In its style you can define its initial state by using
display:none; or display:block;

1. HTML Code

<div id=”main”>
<h3><a href=”#” onclick=”toggleDiv(‘onoff’);”>click here for div show or hide</a></h3>
<div id=”onoff”>Design2core is professional web design company in Faridabad, have another research and development centre in gurgaon India that provides services of web design, CSS Web design, W3C standard compliant web design, web application development, web maintenance, XHTML conversion, graphics designing, software development, flash web design, multimedia presentations, ecommerce online shopping systems, search engine promotion (SEO), software development, website hosting. Website Design using Adobe Tools and W3C Web Standard compliant CSS & HTML programming. </div>
</div>

2. CSS Part

There #main is the outer div. and #onoff is the div which one we want to toggle. here i define its intial state display none. you can define it display block as per your requirment.

#main{ width:100%;}
#onoff{ width:500px; float:left; background-color:#ECFFEC; border:1px solid #000066; padding:3px; display:none;}

3. JavaScript Part

Paste this code in to your head section. toggleDiv function takes one parameter, id of the element you want to toggle. You can call this function on anchor tag in anywhere on the page.

function toggleDiv(divId) {
var div = document.getElementById(divId);
var currentDisplayStyle;
if(window.getComputedStyle)
currentDisplayStyle = window.getComputedStyle(div, null).display;
else
currentDisplayStyle = div.currentStyle.display;
if(currentDisplayStyle != “block”)
div.style.display = “block”;
else
div.style.display = “none”;
}

To see a Live demo. Click here
To download a demo file. Click here

Cheers!!
Joginder Poswal

Tags: , ,

This entry was posted on Thursday, May 28th, 2009 at 1:44 am and is filed under CSS, JavaScript, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

7 Responses to “Show, Hide or toggle your div visibility”

  1. Gaurav Says:

    hi,

    I think if you can provide a working example along with the download link then it would be GREAT!!!

  2. jposwal Says:

    thanks for a good suggestion.

  3. sammy Says:

    It’s really a good technique. It prove very helpful to me.

  4. Pauli Anett Says:

    thanks a lot
    this is very simple and very effetive

  5. avinash Says:

    how to say thnx to you but it really mean..

  6. jposwal Says:

    thanks avinash

  7. LED Torch  Says:

    Free SEO Softwares are great, they are just as good as the paid versions,`”

Leave a Reply

This blog is kept spam free by WP-SpamFree.

 

Get Adobe Flash player