Hide/Show Content Button
You can add a hide/show button to just about anything with just a few lines of javascript. This is also known as a spoiler button. You can use this on text, images, javascript, and pretty much anything you can think of. Now Blogger has a Jump Break option in the post editor so its better to use that instead of this method below for post. This method below is more for gadgets which don’t have the Jump Break option.
To use this just simply add this code where you want it.
To use this just simply add this code where you want it.
Just replace the Blue text with the content or code you want to hide. Replace the Red text with the name you want to display on the button. Now with the Orange text you can leave it the same if you plan to use this one time on a page. But if you want to use this multiple times on the same page you will need to change them each to a different name. If you look in the code below you can see how I had to use spoilor1 instead to get it to display.
Here is a Example:
HIDDEN CONTENT HERE
Now maybe you want the content to display by default and only hide when clicked on. If that is the case use this code below.
CONTENT TO HIDE
Example:
CONTENT TO HIDE
Now maybe you want something a little better the a simply gray button. Well you can use a image instead by replacing the BUTTON TEXT with this code below.
Now just replace the blue text with the URL of the image you want to use.
0 thoughts on “Hide/Show Content Button”
Be Cool & Leave a Reply/Comment