Last active
December 29, 2015 00:28
-
-
Save matherton/7585769 to your computer and use it in GitHub Desktop.
Show and hide JS with no jQuery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1"> | |
| <title>Toggle</title> | |
| <style> | |
| div#reveal { | |
| display:none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!--<button onclick="toggle('picture')">show picture</button><p /> | |
| <div id="picture"><img src="pic.jpg" /></div>--> | |
| <a href="#" onClick="toggle('reveal');return false;">View All Dates</a> | |
| <ul> | |
| <li>1st Item</li> | |
| <li>2nd Item</li> | |
| <li>3rd Item</li> | |
| <li>4th Item</li> | |
| <li>5th Item</li> | |
| <li>6th Item</li> | |
| <div id="reveal"> | |
| <li>7th Item</li> | |
| <li>8th Item</li> | |
| </div> | |
| </ul> | |
| <script type="text/javascript" src="showHide.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function toggle(id) { | |
| var element = document.getElementById(id); | |
| if(element.style.display == "block") | |
| hide(id); | |
| else | |
| show(id); | |
| } | |
| function show(id) { | |
| document.getElementById(id).style.display = "block"; | |
| } | |
| function hide(id) { | |
| document.getElementById(id).style.display = "none"; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment