Göster / Gizle - Aç / Kapat Bölümü Kodu

Show / Hide - Göster / Gizle - Aç / Kapat - Daralt / Genişlet Bölümü Kodu

Sitelerde veya bloglarda içeriği daha iyi aktarmak ve gerekli olduğunda açılabilecek bir bölüm oluşturmak sayfa içi düzeninde oldukça faydalı oluyor. Özellikle uygulama paylaşan bloglar için oldukça faydalı bir HTML - CSS kod düzenledim.
Show / Hide - Göster / Gizle - Aç / Kapat - On / Off bölümü oluşturan kodlar :




Stil 1. 

<div id="spoiler" style="display: none;">
GİZLENECEK RESİM, METİN, YAZI VEYA KOD </div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to show/hide" type="button">AÇ/KAPAT</button><!--Author: webkenti.net-->

Stil 2. 

<input onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Yazıyı Kapat';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Yazıyı Aç';}" type="button" value="Yazıyı Aç" /><br />
<div style="display: none;">
GİZLENECEK RESİM, METİN, YAZI VEYA KOD </div><!--Author: webkenti.net-->

Stil 3. 

<div id="showhide">
<div>
<input type="button" value="Göster / Gizle" style="margin:0px;padding:0px;" 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 = 'Gizle'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Göster'; }">
<div style="background: #000000; margin: 20px auto; border: 0px solid #eeeeee; padding: 0px;">
 <div style="display: none;"> GİZLENECEK RESİM, METİN, YAZI VEYA KOD</div></div></div></div><!--Author: webkenti.net-->

HTML / JAVASCRIPT EKLEMEK

Widget (gadget) olarak eklemek için :

Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :

Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

* Canlı Demo için :

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

Kod Editörünü kullanabilirsiniz.