Add Text/Image inside a Show/Hide Button in Blogger (Spoiler Button code)

This article is about "Add Text/Image  inside a Show/Hide Button in Blogger (Spoiler Button code)". When user comes to the page will not shows the content that you have given in the Spoiler Button, and it will be visible only after clicking on the button by the visitor.

This Spoiler button can be used in many ways, You can use this this short your content and view it only after the user need to read it more, Can be used for pages providing Question and answers for practicing, like the question will only visible to the user and the answer will display after clicking on the Button.

(ads1)

This is a simple code you can use in Blogger and WordPress too, and you need to Change the content to whatever you want. The spoiler has the function to hide and show text or images, and is very useful when trying to reduce space in the inputs or only if you want the text or image only see when pressed.

<div><input value="Show" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Hide Content';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show Content';}" type="button" /><div style="display: none;">HIDE CONTENT GOES HERE</div></div>(code-box)

• Change the Text HIDE CONTENT GOES HERE to your content, which you need to Hide

Copy the entire code and paste it in HTML View to your post or page .

Demo: 

HIDE CONTENT GOES HERE