Posted By

iTony on 01/28/08


Tagged

div css javascript toggle


Versions (?)

simple toggle html element


 / Published in: JavaScript
 

  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.