jQuery Spoiler

Introduction: This tutorial is on how to create a jQuery/Javascript spoiler. This will allow large containers such as images to be hidden/shown depending on the users preference. HTML: First we need to make the basic HTML file. This will include the html, head, and body tags for the standard HTML structured file... jQuery Includes: Now, to use jQuery within our file, we need to include it. We can do this by downloading and including the required jQuery .js files/libaries locally, or we can link directly to the jQuery site (which I will be doing since it is easier). The current latest version is; 1.11.0 and 1.2.1. However, you can get the latest links/files/libaries from the official jQuery website; http://jquery.com/ The above script tags should go in to the head tags of our html file because they do not add display elements to the page. Image: Now we need to put in our image we want to use as a spoiler. We will put a random image in to an image tag within a div (with the id of 'spoilerDiv2')... Now, obviously if we just used our above code, when we made our div invisible/display none, we would not be able to bring it back. So we will use another div ('spoilerDiv', without the '2' at the end of the ID name) as the toggle button... Now we are able to use our 'spoilerDiv' id as a reference when creating our spoiler code in a second for our 'spoilerDiv2' div. Spoiler jQuery: The first thing we want to do in our jQuery is create our script tags within our head, html tags... And then, within those two script tags, we want to write the shorthand version of the document ready function which gets ran automatically once the page has loaded. The following code would simply output 'hello' in to an alert box once the page is loaded. Test this out to ensure that your jQuery is included correctly - ensure you have javascript enabled on your browser, etc. If you receive the alert box, you can move on to the next section. Now that we are sure our jQuery is working correctly, we want to add a click listener to our 'spoilerDiv' div tags. This will be ran whenever the user clicks their mouse on to the div, in our case, the 'Hide/Show' text... Within there, we first want to grab the css property 'display' of the 'spoilerDiv2' div tags... Then we can simply check if the property is 'none' (invisible, don't display it on the browser's page). If it is none, we set it to 'block', whereas we set it to 'none' if it is anything else ('block')... Finished!