Spoiler Button (HIDE/REVEAL)

Hello guys,I am looking for a good spoiler button, which can hide or show some text and images on my pages. I am using the solutions offered in this question, but my webpage is loading too slow and it takes too much time until the content I need to hide gets hidden. Do you have any advice for improving the performance or maybe some other solution? You can see a sample page from my (puzzle) website here - > http://www.puzzleprime.com/updates/?tag=Advanced

OK, I think I found the best solution so far. I used the code from BloggerSentral with a little bit modifications, so that it matches better the looks of Squarespace. I made the button transparent with bold font, so that it looks like the markdown option offered in this answer. However, here you can add not only text, but also images to the spoilers, as well as make additional customizations. It also works instantly, so there is not loading time until the spoilers collapse. You can see how the function looks like on my puzzle blog -> https://www.puzzleprime.com/updates/

This is the CSS part, you can put it in the header of the advanced settings of the blog, if you want to use spoilers for multiple blog posts.

<style type="text/css">
.spoilerbutton {display:block; border:none; padding: 0px 0px; margin:10px 0px; font-size:150%; font-weight: bold; color:#000000; background-color:transparent; outline:0; 
}
.spoiler {overflow:hidden;}
.spoiler > div {-webkit-transition: all 0s ease;-moz-transition: margin 0s ease;-o-transition: all 0s ease;transition: margin 0s ease;}
.spoilerbutton[value="Show Solution"] + .spoiler > div {margin-top:-500%;}
.spoilerbutton[value="Hide SolutionSolution"] + .spoiler {padding:5px;} 
</style> 

Next, whenever you want to add spoilers, use this HTML code:

<input class="spoilerbutton" type="button" value="Show Solution" onclick="this.value=this.value=='Show Solution'?'Hide Solution':'Show Solution';">
<div class="spoiler"><div>

<p>  </p>
<p>  </p>

SOME TEXT

<img style=" margin: 30px auto; display: block;" height="Auto" width = "Auto" src="IMAGE URL">

</div></div>

As I mentioned, you can add additional customizations, such as background color, etc, but this works best for my website. If you want to change the spoilers label, just change "Show Solution" and "Hide Solution" to whatever you need both in the CSS and the HTML parts.

Hi,

I just want to clarify something. I'm trying to use this method for blog posts to hide big blocks of text and images.

I have done the above and it works fine for text, but I can't figure out where/how I add the images. Do I just add the image URL where it says src=IMAGE URL ?

Thanks

That's correct @stephmowry

Hi logaritym,

Thanks for this, I've been using it on my site and it works really well.

I know this is old but I was wondering if you knew how to center the text of the Show Solution/Hide Solution buttons on a page? I'd love to have it in the center instead of on the left but I can't figure it out.

Thanks again.

Hello! Thank you for this!Does anyone know how can i make this show in an email?

I know this is old but this is for anyone else who comes along. Ropeadope https://stackoverflow.com/questions/16569577/how-to-center-things-displayblock-inline-block