Show / Hide - Göster / Gizle - Aç / Kapat 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 kod düzenledim.
Show / Hide - Göster / Gizle - Aç / Kapat - On / Off bölümü oluşturan kodlar :




Stil 1. CANLI DEMO SAYFASI

<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>

Stil 2. CANLI DEMO SAYFASI

<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>

Stil 3. CANLI DEMO SAYFASI

<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>


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.

0 yorum: