Advanced Search

Show & Hide with Raw JavaScript

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

Expand | Embed | Plain Text

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.