How to Add "Reveal Buttons" to Your Blog Post

Had a few people contacting me wanting to know how to add “Reveal Buttons” to their blog posts so thought I’d post it on the Blog so everyone can have a go or at least have it available for reference.

Firstly click the “HTML” button in the top left of the new blog post page, the code won't work if you use the "Compose" option as you would normally.

Rather than writing out the code simply cut and paste the code I've written below into your post.

The code in green does the same job as the “Read More” page break you put in after your intro.

The code <br> is a line space, so when you preview your post you can edit to add more in or take some out.

The rest of the code can be duplicated as many times as you want to put multiple items in the post but what you must do for each one is change the “spoiler” number I’ve highlighted in red otherwise it either won’t work or will reveal a previous item, for ease I just do it sequentially spoiler1, spoiler2, spoiler3, etc.

The hidden content can be text, link or photo, etc, if a photo just use the “Insert Image” tab at the top of the page which works the same as when composing a blog normally.

When you put in your text for the Reveal Button the quotation marks must remain.

Hope this is useful for those that may like to try it - Enjoy. 

WRITE YOUR INTRODUCTORY TEXT TO THE ARTICLE HERE

<br>

<br>

<br>

<!--more--><br />

<br>

<br>

WRITE THE TEXT YOU WANT TO INTRODUCE THE ITEM WITH HERE

<div id="spoiler1" style="display:none">

ADD YOUR HIDDEN CONTENT HERE

</div>

<button title="WRITE WHAT YOU WANT SHOWN ON THE REVEAL BUTTON HERE" type="button" onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}">Show</button>

<br>

<br>