advanced code snippet search

We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

iTony on 01/28/08


Tagged

div css javascript toggle


Versions (?)


simple toggle html element

Published in: JavaScript 

Plain TextExpand 
  1. <style type="text/css">
  2. .divHide{display:none;}
  3. .divShow{display:block;}
  4. </style>
  5. <script type="text/javascript" language="javascript">
  6. function showhide(obj) {
  7.   var el=document.getElementById(obj);
  8.   if (el.className == "divHide") {
  9.     el.className = "divShow";
  10.   } else {
  11.     el.className = "divHide";
  12.   }
  13. }
  14. </script>
  15. ...
  16. <a onclick="showhide('calendar');" href="#calendar">click here</a>.</p><a name="calendar"></a>
  17.         <div id="calendar" class="divHide"></div>

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: eskimoblood on January 30, 2008

The problem with this solution is that your element only should be displayed block but in the case you have an inline element or a table cell it will fail, so this solution is a little bit more flexible:

function showhide(obj) { var el=document.getElementById(obj); el.style.display=="none" ? el.style.display="" : el.style.display="none" }

Posted By: iTony on March 5, 2008

Thanks for the comment. That is a better generalized way. I guess i made it to specific for my purpose.

You need to login to post a comment.