Hide and Show a Div Using Javascript

August 28th, 2012 by laeeq | 1 comment

In this post I have explained how to create a hidden Div and display it with the click of a button. Actually there is a many reasons you may want to hide a Div in a website design. Sometimes you may want to create a drop down type menu or a box that will show more information when you click a link.

Here I have created a javascript function named as divHideShow that will be called on button click event to hide and show div content.

Below is javascript method to hide and show div.

view plaincopy to clipboardprint?
  1. <script language=javascript type=‘text/javascript’>
  2. function divHideShow(divid) {
  3. var div_state = document.getElementById(divid).style.display;
  4. if (div_state == ‘block’) {
  5. document.getElementById(divid).style.display = ‘none’;
  6. } else {
  7. document.getElementById(divid).style.display = ‘block’;
  8. }
  9. }}
  10. </script>

Now call above method in your file.

view plaincopy to clipboardprint?
  1. <html>
  2. <body>
  3. <button onclick=“javascript:divHideShow(‘targetDiv’)”>Hide Show Div</button>
  4. <div id=‘divid’>Javascript Hide Show Example</div>
  5. </body>
  6. </html>

You can subscribe to PHPZAG.COM posts by Email

 

Related Topics:

 

 

  1. erickennedybh
    October 3rd, 2012 at 20:14 | #1
    Reply | Quote

    Wow! This could be one particular of the most useful blogs We’ve ever arrive across on this subject. Basically Magnificent. I am also an expert in this topic therefore I can understand your effort.

  1. No trackbacks yet.