Translate This Blog
Always Remember To Back Up Your Template Before Attempting Any Of The Tweaks On This Site

Do to error codes you should use the old interface when attempting many of these tweaks to your template

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.

<div id="spoiler" style="display:none">
HIDDEN CONTENT HERE
</div>
<button title="Click to show/hide content" type="button"
onclick="if(document.getElementById('spoiler')
.style.display=='none') {document.getElementById('spoiler')
.style.display=''}else{document.getElementById('spoiler')
.style.display='none'}">BUTTON TEXT</button> 

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:



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.

<div id="spoiler1">
CONTENT TO HIDE
</div>
<button title="Click to show/hide content" type="button" onclick="if(document.
getElementById('spoiler1') .style.display=='') {document.getElementById('spoiler1') .style.display='none'}else{document.getElementById('spoiler1') .style.display=''}">BUTTON TEXT</button>

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.
<img src="IMAGE URL" />
Now just replace the blue text with the URL of the image you want to use.
Labels: ,

10 comments:

  1. Thanks so much! Now, is there a way to make several show/hide content buttons, but when one is shown and you want to show another one, the first hides itself automatically? Thanks! LUCAS.-

    ReplyDelete

  2. You need to enter a separate ID (orange) for the 2nd spoiler button.

    ReplyDelete

  3. I'm trying to use this for my video based blog to keep people from being overwhelmed by 10+ videos loading all at once.

    But when I try the first method, which is what I'd prefer, the first video keeps repeating over and over again.

    The second one works but again, I don't want the videos loading all at once. Is there something I'm doing wrong?

    ReplyDelete

  4. Any tips on making this work in Internet Explorer?

    ReplyDelete

  5. I've been looking for days for a hack that will (1) work and (2) not complicate my life. Others required me to do some tweaking on the main template as well. Yours just have to be appended on the page you where the hide/show functionality is needed.

    Thanks so much for sharing. You just made my day.

    ReplyDelete

  6. Love this feature! Have been looking for this for awhile.
    Two questions for ya:

    1. Is it possible to have the hidden content display below the button?

    2. Is it possible to have the button text to display "SHOW" when the content is hidden and "HIDE" when the content is revealed?

    Thanks so much!!
    -Jess

    ReplyDelete

  7. Hi Jess,

    You can have the button on top of the content by moving the the div section to the bottom of the code. This means everything in the first 3 lines of coding gets moved to the bottom.

    As for the button alternating when being clicked on I do not believe their is a way to do so while keeping this a simple tweak. As you might of seen Admins comment above you, their are other ways to do this online in which requires you to do some hard coding directly into the template. These are much harder to do but may provide the alternating button that your looking for.

    ReplyDelete

  8. Very awesome! I run three website with spoiler content. This helps out tremendously. Thanks!



    Plot Spoiler

    ReplyDelete

  9. What do I do if I want to have this HIDE/SHOW button appear by default in every one of my posts? I am a food blogger and want to be able to show/hide recipes.

    ReplyDelete

  10. The only way I know to do that would be by using the old Blogger interface and you will find a option in your settings called formatting. Within the formatting their should be a box titled post template where you can add the code. This will add the code to all new post within the post editor.

    ReplyDelete

Subscribe to: Post Comments (Atom)
Web Design Blogs PageRank