Hide It With Spoiler

Straight ahead.

This how you can hide your content in blog post.

Use the script below:

<div id="spoiler">
<div>
<input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'CLOSE'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Open Again'; }" name="button" type="button" value="SPOILER">
</div>
<div id="show" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: white; border-right-color: white; border-bottom-color: white; border-left-color: white; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px; width: 98%; ">
<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">
<p style="text-align: justify;">

YOUR CONTENT

</p>
</div>
<div id="hide" style="display: none; ">
</div>
</div>
</div>

Replace 'YOUR CONTENT' with what ever you want.

You can put spoiler not just your blog post, try to put it in your widget or widget itself.