Spoiler Button (HIDE/REVEAL)

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.