How To Create Button Hide and Show (Spoiler)

Button Hide and show more popularly known as spoiler. Perhaps, from the name alone "Hide and Show" bloggers already know the function of this button. Do not know? Well, I explain a little. Hide in Indonesian means hide and Show in Indonesian means show. So, Spoiler button serves to hide text, links or pictures. This spoiler is very helpful blog because with a spoiler, we can save place if we use when writing articles and can save space as well if we use as a widget or gadget. Place the code Hide and Show or spoiler at the desired place (Column Column Postings or HTML / Java Script)

<div> <div style = "margin-bottom: 2px;"> <i> <b> <small> Try in Click </ small> </ b> </ i> <input value = "Show" style = "margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick = "if(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display ! = '') {this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; This.innerText = ''; this.value = 'Hide';} else {this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'None'; this.innerText = ''; this.value = 'show';} "type =" button "> </ div> <div style =" border: 1px inset; margin: 0px; padding: 6px; "> <div style =" display: none; "> TEXT, LINK OR PICTURES CAN PLACED URL HERE </ div> </ div> </ div>

Supplement:
Do not forget to replace "TEXT, LINK OR PICTURES URL can be placed HERE" with images, links or text that will be hidden