SUNIPEYK

[ Okuma süresi tahmini 2 dakikadır ]

En yeni Toogle, Göster/ Gizle Kodları

Bir öncekinden çok daha kullanımı kolay, kodları sade ve geçerli yenisi.
Kodların kaynak adresi Pure CSS (NoScript) Toggle

Kaynak biraz eski. Yazıda Safari ve IE tarayıclarda kodun çalışmadığını belirtmiş. Ancak çalışıyor.

IE 11, Safari, iOS Safari, Firefox, Opera, Chrome, Edge, tüm bu tarayıcıların son sürümlerinde sorunsuz çalışıyor.

CSS Kodları

label.toggle { cursor: pointer; }
 input.toggle { display: none; }
 input.toggle:checked+div { display: none; }

Hepsi bu. Sadece 3 küçük, kısa CSS kodu yeterli.

HTML Kodları

<label for="AAAAA" class="toggle">Toggle Div visibility...</label>
 <input id="AAAAA" type="checkbox" class="toggle" checked="checked" >
 <div class="deneme">
 <h3>İçerik Başlığı vs.</h3>
 <p>İstediğiniz herhangi bir içerik</p></div>

Html kodlarında dikkat etmeniz gereken yukarıda AAAAA ile gösterilen kısımları aynı adla isimlendirmeniz.

İkinci bir açılır/ kapanır bölüm oluşturmak isterseniz yeni kodlarınızda AAAAA bölümünü yine özgün olarak isimlendirmeniz gerekir.

Aynı zamanda Medium’da da yayınlanmıştır.