How to create a spoiler or show-hide effect

by Greenlava

Here is  a very simple show/hide effect code for you to copy and use. This effect is also known as a spoiler or a peek-a-boo.  It uses a small inline Javascript. You can use this code anywhere, be it in the sidebar or in your blog post, as long as you can add the spoiler code to it.

[Update Mar 2013] See our new and improved  content spoiler.

This code will add a button, clicking it will expand the content, showing the hidden part. See it in action, click the button now,

Simply put the content you want hidden inside the division tags, replacing the phrase HIDDEN CONTENT HERE.

VISIBLE CONTENT HERE
<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'}">Show/hide</button>

 

Customization

  • You can replace “Show/hide” text with your own, in line 5.
  • If you want to have multiple spoilers on a single page, make sure you give each of them a unique ID.
  • To use a regular link instead of a button, simply replace the word button with a letter a.

Enjoy!

59 comments to "How to create a spoiler or show-hide effect"

Canada provinces,  December 18, 2009 at 12:10 AM    

Really useful. Thanks to share a very informative post.

jfook,  December 20, 2009 at 5:21 PM    

Thanks for sharing. :)

Anup,  April 26, 2010 at 11:25 AM    

Nice Javascript. I like your every coding :)

Greenlava,  April 26, 2010 at 5:42 PM    

@Anup
Thanks

DRM,  August 19, 2010 at 1:51 AM    

I feel you should point out that if you're trying to do this on a main page then the code will only call for the first instance of "Spoiler". If you want to have multiple expanding posts on a single page you need to make sure each of them has a unique ID.

Other than that, though, thanks a bunch. Certainly the easiest implementation of expanding posts I've been able to find.

AiresOFwar,  August 19, 2010 at 7:01 PM    

Anyway to get this to work multiple times on the same page?

Greenlava,  August 19, 2010 at 10:08 PM    

@AiresOFwar
Like DRM commented above, you have to use different IDs. For each spoiler, replace the ID "spoiler" in line 2 and line 5 (3 places in line 5) with a new ID.

Anonymous,  August 26, 2010 at 7:31 AM    

I think buttons are pretty ugly. What script replaces the button with a simple link?

Greenlava,  August 26, 2010 at 9:50 AM    

@Anonymous
To turn the button into a link, replace the button tag in line 5 with an a tag -[button and [/button] with [a and [/a] respectively.

lisab,  September 10, 2010 at 10:56 AM    

um where exactly do you put this in your code? I've tried it on my blog and the button is not appearing. sorry if this is a noob question.

Greenlava,  September 11, 2010 at 8:00 PM    

@lisab
You put it in the post.
First type your post, then switch to HTML mode to insert the code.

Anonymous,  October 24, 2010 at 5:27 AM    

great

erin,  November 7, 2010 at 10:16 PM    

Is there a way to replace the button image with my own image?

Greenlava,  November 7, 2010 at 11:52 PM    

@erin
Replace the code in line 5 with this one:
<img src="YOUR_IMAGE_URL" title="Click to show/hide content" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}/>

YOUR_IMAGE_URL is the direct link to your image.

Erin,  November 8, 2010 at 1:28 PM    

It doesn't work. Only the image shows :(

Greenlava,  November 8, 2010 at 3:16 PM    

@erin
Oh I forgot the closing quotation mark for onclick content. Use this instead:
[img src="YOUR_IMAGE_URL" title="Click to show/hide content" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}"/]

replace [ with < and ] with >

:: House ::,  February 26, 2011 at 4:39 AM    

When I put your code in (with a small mod), it works, but with two issues:
1. It only shows the expanded section for less than 2 seconds
2. When I tried to change the buttons tags to simple [a] tags, it worked fine from a display perspective, but blogger keeps putting a default url in (for my page edit) and I don't want the url to go anywhere, but to simply show the hidden section.

Here's the modified code:
[a href="" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to show/hide content" type="button"]THIS IS THE TITLE FOR ARTICLE 1[/a]
[div id="spoiler" style="display: none;"]
This is the hidden section for article 1 by default.[/div]

The end result of that code is that is shows "This is the title for Article 1" as a link, but within 2 seconds, it redirects me to the edit page of blogger, so basically, I'm back to the design aspect and it's showing me the code again.

Suggestions?

Greenlava,  February 26, 2011 at 11:22 PM    

@:: House ::
Replace the a tags with span tags and remove href attribute, like this:
[span onclick="if(document.getElementById('article1') .style.display=='none') {document.getElementById('article1') .style.display=''}else{document.getElementById('article1') .style.display='none'}" title="Click to show/hide content" style="cursor: pointer;"]23-february-2011 - Conference Tournaments[/span]

Greenlava,  February 26, 2011 at 11:33 PM    

@:: House ::
...and you might want to add text color into the style attribute (to mimic link):
style="cursor: pointer; color:#cc0000"

:: House ::,  February 27, 2011 at 2:52 AM    

Thanks. I changed the a tags to span and it works as you suggested. Thank you very much. I thought there was going to be a need to update the overall site xml template.

Appreciate the help.

Azmee @ Buka-rahasia Perjalanan Blogger,  March 3, 2011 at 11:50 PM    

Green, i could not copy the whole code because the edge part of the fifth line is hidden below your sidebar (the line goes to far to the right), it's shown like this: document.getElementById('sp.....(i can't see the rest)

Greenlava,  March 4, 2011 at 12:13 AM    

@Azmee @ Buka-rahasia Perjalanan Blogger
That happens when the page is not fully loaded. Try refreshing. You should see the code in black and blue texts.

Anonymous,  March 12, 2011 at 10:37 AM    

Thank you, it is helpful
but what if have to use it more than 1 in same post?

Greenlava,  March 12, 2011 at 7:52 PM    

@Anonymous
Use different IDs. See reply #7

The New Old-Fashioned Girl,  May 1, 2011 at 8:29 AM    

Hi there, I tried using the code and in the preview everything is how it should be - the text is hidden, the button has changed into a link that says what I want it to - except that the button/link doesn't seem to realise it's supposed to do something. I click on it and nothing happens! I haven't published yet because I want to get it right, so this is happening in the preview. Is this the reason? Will it show up properly when I publish the post?

Greenlava,  May 2, 2011 at 8:42 AM    

@Zora_Aisling
Yes it will be clickable once you publish it.

The New Old-Fashioned Girl,  May 2, 2011 at 11:04 AM    

So it is! Thank you @Greenlava

L.Torres, RN,  May 28, 2011 at 12:53 PM    

thank you for this tutorial! :)

semuadasini@yahoo.com,  May 29, 2011 at 10:12 PM    

Thanks for your guide for show/hidden button post.

I applied to my blog, good result.

But i want to make more buttons in my post, its like:

SHOW/HIDDEN BUTTON 1

Text 1 that hidden before was showed.

Read more:

SHOW/HIDDEN BUTTON 2

Text 1 that hidden before showed.

Unfortunately, problem happended. After I click 'SHOW/HIDDEN BUTTON 1', and click 'SHOW/HIDDEN BUTTON 2', its hide the text 1, but not open text 2.

I dont know where the problem is.

My url for this post blog for your review, as follow:

http://semuadasini.blogspot.com/2011/05/klik-kedai-edymart.html

TQ again.

Greenlava,  May 30, 2011 at 10:15 AM    

@semuadasini
To create more than one spoilers, you must give the spoilers a unique ID. For example you can use "spoiler2" as the ID for the second spoiler. You need to replace "spoiler" with "spoiler2" at all four places -one in line 2 and three in line 5.

Stella,  July 1, 2011 at 8:19 PM    

Greenlava, thanks a lot for this tips.
it's really useful and easily understand.
really thank youu!!

Alison Hightower,  July 30, 2011 at 12:13 AM    

I tried using the code and it only hid the first line of the text I want to hide, even though I put all of it in the "hidden content here" area. Any suggestions?

Greenlava,  July 31, 2011 at 9:32 PM    

@Alison
What's the URL of your post?

hadi,  August 19, 2011 at 12:31 AM    

thanks dude...

Wahyudi Blog !,  January 15, 2012 at 10:14 AM    

Thanks... ^^

Bali Land and Villa,  July 17, 2012 at 12:36 AM    

Can we put button top of the hidden content instead of bottom of content ?

Greenlava,  July 22, 2012 at 12:18 PM    

@Bali Land & Villa
Yes you can.

JM,  October 16, 2012 at 12:38 AM    

Thanks so much! This has helped massively with my new music composition and piano technique blog, particularly having different levels of difficulty all in the same post and keeping it tidy.

hana zm,  October 25, 2012 at 12:37 PM    

so useful thankyou ~!

FluteNotes.ph,  October 26, 2012 at 11:49 PM    

Thanks.. It was a simple tutorial. Much better than others. Others are just too complicated. Thanks again bro.

Anonymous,  November 3, 2012 at 7:47 AM    

Yoy are the master, thank you sooo much!

salsabila,  November 22, 2012 at 9:38 PM    

really helpfull, thank's

MTK,  December 5, 2012 at 12:16 PM    

It's very useful. Thank you!

TranceInside,  December 16, 2012 at 9:13 AM    

Thank you! I have been looking, for the longest time, for a this particular code with the easy to follow instructions. It works very well on my website. :)

C.E.R.,  January 25, 2013 at 5:47 AM    

Greenlava, this is awesome! Thanks so much! Just one question? What code can I add to change the button color and the text color? Many thanks!

Greenlava,  January 25, 2013 at 12:53 PM    

@C.E.R
Insert a style attribute into the button tag, like this:
<button style='background-color:PUT_COLOR_CODE_HERE; color:PUT_COLOR_CODE_HERE; title="Click to show/hide ...

Altoseer,  February 16, 2013 at 6:14 AM    

Thanks for the awesome tutorial Greenlava! This worked really great!

But I have one question. What if I want to change the name of the spoiler button when the content is shown like when the button is clicked and the content appears, the button will change its name to "Hide Content" and when you click the button again to hide the content, the button name will go back to "Show Content" (if that made sense, sorry I suck at explaining) how do I do that?

Greenlava,  February 19, 2013 at 2:40 AM    

@Altoseer
I'm working on an improved version. Will release it in a new post soon.

heX-,  March 18, 2013 at 4:24 AM    

Awesome! I have just one question, how to move the button to the right?

Greenlava,  March 20, 2013 at 12:34 AM    

@heX-
Replace line 5 with this:
<button style="float:right;" 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'}">Show/hide</button><br/>

steve,  March 29, 2013 at 6:27 PM    

I used the code and its working fine as button but when i use it link it works but when i click on the link it shows the hidden text and the page got refresh.
please help.

Grace,  March 31, 2013 at 2:35 PM    

Hey, I can't used this on a multiple page. I want to make a multiple link having different
spoiler on each of it. can you help me? Also, I'm making it consecutive but only one
is working. email me please here lovely.tamahome@yahoo.com. Thanks. :))

Greenlava,  April 3, 2013 at 12:07 PM    

@Anz Joy
Add this style tag (see reply 51) in line 5 with:
style="background: orange; border: 1px solid black;"

@Grace
Use our new and improved content spoiler

Anonymous,  April 18, 2013 at 3:16 AM    

Hi, is it possible to make the button stay at it's place after clicking? I want hidden text to show under the button, not above.

lawra teikoku,  April 29, 2013 at 8:38 AM    

thanks, this is super helpful

Anonymous,  June 13, 2013 at 3:10 AM    

Working perfectly..... but please make sure if you hide text i should not be hidden to google or other search engines too...

Anonymous,  July 6, 2013 at 5:27 AM    

admin ===> Working perfectly..... but please make sure if you hide text i should not be hidden to google or other search engines too...

Anonymous,  December 26, 2013 at 10:00 PM    

THANK YOUUUUUUUUUUUUUUUUUU!!!!!

jasa arsitek rumah,  December 31, 2013 at 4:21 PM    

Incidentally, I was looking for this trick .. Thank you for the tutorial ..

Comments on this post are closed.