Last active
August 29, 2015 14:10
-
-
Save robynitp/e34495df0bedb6ce91ce to your computer and use it in GitHub Desktop.
Show and hide divs based on click
This file contains 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
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <title>Hello World</title> | |
| <!-- the jquery script from the internet --> | |
| <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <!-- your custom javascript --> | |
| <script src="onescript.js"></script> | |
| <!-- CSS : look at this file to see how things are styled--> | |
| <link rel="stylesheet" type="text/css" href="mystyle.css"> | |
| <body> | |
| <p>An adventure</p> | |
| <button id="myButton">Click me</button> | |
| <div id="part1" class="adventure-part"> | |
| Hello! This is your first task | |
| </div> | |
| <div id="part2" class="adventure-part"> | |
| Good job! Now for your 2nd task. | |
| </div> | |
| <div id="part3" class="adventure-part"> | |
| Time to start part 3 | |
| </div> | |
| </body> | |
| </html> |
This file contains 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
| .adventure-part{ | |
| /* start with everything hidden, using CSS display property */ | |
| display:none; | |
| /* border, margin, etc. */ | |
| border:1px solid #349829; | |
| margin: 10px; | |
| padding: 30px; | |
| } | |
| #part1{ | |
| /*start with part 1 visible */ | |
| display:block; | |
| } |
This file contains 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
| $( document ).ready(function() { // wait for the document to load | |
| // --- ALL your code goes inside here --- // | |
| // keep track of which part of the adventure we're on | |
| var currentPart = 1; | |
| // you'll eventually need to know which part is the last one | |
| var totalParts = 3; | |
| // set an event listener on the button with id "myButton" | |
| // Documentation: http://api.jquery.com/click/ | |
| $('#myButton').click(myClickFunction); | |
| function myClickFunction(){ | |
| /* | |
| Note: | |
| .hide() and .show() in are easy ways in jquery to control the CSS display property | |
| See the CSS file to see how display:none and display:block work | |
| Documentation: | |
| http://api.jquery.com/show/ | |
| http://api.jquery.com/hide/ | |
| (scroll down to the example in both these jquery doc pages) | |
| http://learnlayout.com/display.html | |
| */ | |
| // first hide ALL the parts -- everything with a class called 'adventure-part' | |
| $('.adventure-part').hide(); | |
| // move to the next part | |
| currentPart++; | |
| // the ids of the divs are 'part1', 'part2', etc. | |
| // make the part name selector ( '#part1', '#part2', etc) | |
| var partname = '#part'+currentPart; // will produce '#part2', for example | |
| // Show ONLY the current part | |
| $(partname).show(); // this is the equivalent of writing $('#part2').show() for example. | |
| } | |
| }); // end document ready |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment