Göster / Gizle - Aç / Kapat Butonu Kodu

Show / Hide - Göster / Gizle - Aç / Kapat - Daralt / Genişlet Butonu 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 butonu oluşturan kodlar :


Aç / kapa butonu ile içerik göstermek


Temel kod :

<style type="text/css">
.spoilerbutton[value="Göster"] + .spoiler > div {margin-top:-100%;}
.spoilerbutton[value="Gizle"]
</style>
<input class="spoilerbutton" type="button" value="Göster" onclick="this.value=this.value=='Gizle'?'Göster':'Gizle';">
<div class="spoiler"><div>
OLAY </div></div><!--Author: webkenti.net-->

Gösterilecek içeriğin arka fon (background) rengi 
sayfa renginden farklı olsun istiyorsanız :

<style type="text/css">
.spoiler {overflow:hidden;background: #f5f5f5;}
.spoiler > div {-webkit-transition: all ease;transition: margin 1s ease;}
.spoilerbutton[value="Göster"] + .spoiler > div {margin-top:-100%;}
.spoilerbutton[value="Gizle"]
</style>
<input class="spoilerbutton" type="button" value="Göster" onclick="this.value=this.value=='Gizle'?'Göster':'Gizle';">
<div class="spoiler"><div>
GİZLENECEK RESİM, METİN, YAZI VEYA ÇALIŞTIRILACAK KOD </div></div><!--Author: webkenti.net-->

Göstermek istediğiniz içeriğin kod penceresinde göstermek istiyorsanız : 

<style type="text/css">
.spoilerbutton[value="Göster"] + .spoiler > div {margin-top:-100%;}
.spoilerbutton[value="Gizle"]
</style>
<input class="spoilerbutton" type="button" value="Göster" onclick="this.value=this.value=='Gizle'?'Göster':'Gizle';">
<div class="spoiler"><div>
<textarea style="background-color:#transparent; width: 630px; height: 135px;" >GİZLENECEK RESİM, METİN, YAZI VEYA KOD </textarea>
</div></div><!--Author: webkenti.net-->

Not : Kod tamamen sitenin kendi içerisinde çalıştığı için sayfa hızını etkilemez, örneğin bir sayfada yüzlerce yüksek çözünürlükte resim yayınlayacaksınız, bu kodun içerisine atarsanız sayfa hemen yüklenir ve ziyaretçi sadece resimlerin yüklenmesini bekler.
Ekleyeceğiniz resim, video, link, yazı gibi elementleri html olarak eklerseniz rengini , boyunu , fontunu gibi özellikleri değiştirmek için html tagları kullanmalısınız.

OLAY : İçerisine eklediğiniz her şeye (HTML/ Java) duyarlıdır. Örneğin yazdığınız yazıyı alt satıra geçirmek için <br /> etiketi kullanılmalıdır. (br/ değil).
Bu kodu yazmamdaki temel işlev örneğin bir java yada html kodu yayınladınız, demo yada canlı görünümü sayfada yayınlarsanız sayfa çok uzuyor yada anlatım bozuluyor, bazende demo sayfa dışına taşabiliyor bu nedenle genelde test blogları tercih ediliyor. Bu kod sayesinde ziyaretçi önizlemeyi aç/kapa şeklinde görebilir. böylece adminlerde bir demo için boş yere fazladan bir test blogu açmak zorunda kalmazlar.

GİZLENECEK RESİM, METİN, YAZI VEYA KOD : Sitenizde yayınladığınız koddlar bazen çok uzun yada çok geniş olup düzeni bozuyor , bazende örnek kodu kopyalanmaz hale getiriyor. <textarea> ile çerçeve içerisine alınmış kullanışlı bir açılır kapanır kod penceresidir. Bu kod penceresini ziyaretçi açarak rahatça kodu alabilir. Yada yazdığınız uzun yazılara alt açıklama , referans, örnek resim gibi alt bilgiler eklemek için kullanabilirsiniz.

background: #f5f5f5;} : Gizlenen alanın arkafon rengi

background-color:#transparent; Açılacak kod penceresinin arkafon rengi

width: 630px; : Açılacak kod penceresinin minimum genişliği

height: 135px; Açılacak kod penceresinin minimum yüksekliği

1s: Pencerenin açılıp kapanma süresi (saniye)

*Blogunuzda göstermek istediğiniz yere Blogger Kullanıcı paneli > Yerleşim > Gadget ekle > HTML/JavaScript ekle yolunu izleyerek ekleyebilirsiniz.
* Paylaşımlarınızı yazdığınız panelde HTML kısmından ekleyerek tek bir sayfa içinde de kullanabilirsiniz.
Standart buton yapısı kullanılmıştır, isterseniz değiştirip temanıza uygun görsellikte buton kullanabilirsiniz.

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.