Created
July 24, 2015 19:17
-
-
Save shduff/8ccb1183208c548884c3 to your computer and use it in GitHub Desktop.
make a div appear when you click!
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> | |
| <style> | |
| #clickme { | |
| height:600px; | |
| width:600px; | |
| background-color:blue; | |
| float:left; | |
| } | |
| #invisible { | |
| display:none; | |
| float:left; | |
| background-color:yellow; | |
| height:200px; | |
| width:200px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="clickme">Click me.</div> | |
| <div id="invisible">Now you see me!</div> | |
| <script> | |
| // grab the two divs from the html file so we can use them in our javascript | |
| var clickme_div = document.getElementById('clickme'); | |
| var invisible_div = document.getElementById('invisible'); | |
| // now ad an event listener that is activated by a 'click' | |
| clickme_div.addEventListener('click', function() { | |
| // change the display of the element so that it is visible | |
| invisible_div.style.display = 'block'; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment