Spoiler serves to hide the text on your articles when the button is clicked, the text will appear. It will be hidden when clicked again. To keep your articles in a main post or sidebar is not too long, you can use the spoiler.
Actually, it’s not just plain text that can hide but you can also hide images, videos, links and others. Another advantage of using a spoiler is reducing the loading time of your website. Meanwhile, we can use the spoiler for picture, it will be reduce server’s resource to loading the picture files.
And… I just want to share the code for spoiler show hide to everyone here. Just simply by inserting the HTML code below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div id="spoiler"> <div> <input name="button" 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'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="Click Here" /></div> <div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"> <div style="background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; color: black; margin: 0px; padding: 7px;"> <div style="text-align: justify;"> ere is your text which want to hide</div> </div> <div id="hide"> </div> </div> |
