Jump to content

Spoiler Button (HIDE/REVEAL)

Recommended Posts

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

Link to comment
  • Replies 6
  • Views 21.1k
  • Created
  • Last Reply

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;} 

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>


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


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.

Link to comment
  • 1 month later...


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 ?


Link to comment
  • 9 months later...

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.

Link to comment
  • 6 months later...
  • 2 years later...

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

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.