First we need to make the basic HTML file. This will include the html, head, and body tags for the standard HTML structured file...
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.
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.
The first thing we want to do in our jQuery is create our script tags within our head, html tags...
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')...
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.