Posted By

bullzito on 11/11/10


Tagged

show-javascript-display-hide


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

passion
bullzito


Show & Hide with Raw JavaScript


 / Published in: JavaScript
 

URL: http://marioluevanos.com/playground/Show%20Hide%20with%20Raw%20JS/#

IE compatible.

  1. <script type="text/javascript">
  2.  
  3. //create reusable event function
  4. function addEvent( id, event, fn, capture ) {
  5. if (id.addEventListener) {
  6. if (!capture) capture = false;
  7. id.addEventListener(event, fn, capture);
  8. }
  9. else {
  10. id.attachEvent('on' + event, fn);
  11. }
  12. }
  13.  
  14. //variables to get the ID
  15. var a = document.getElementById('toggle'),
  16. box = document.getElementById('box');
  17.  
  18. //set the display to "block"
  19. box.style.display = 'block';
  20.  
  21. //our main function to show & hide
  22. function showHide(e) {
  23. if ( box.style.display == 'block' ) {
  24. box.style.display = 'none';
  25. a.style.borderBottom = '1px solid #000';
  26. }
  27. else {
  28. box.style.display = 'block';
  29. a.style.borderBottom = 'none';
  30. }
  31. }
  32.  
  33. //call the addEvent function with parameters
  34. addEvent(a, 'click', showHide, false);
  35.  
  36. </script>

Report this snippet  

You need to login to post a comment.