Show & Hide with Raw JavaScript


/ Published in: JavaScript
Save to your folder(s)

IE compatible.


Copy this code and paste it in your HTML
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.