SUNIPEYK

[ Okuma süresi tahmini 2 dakikadır ]

Herhangi bir javascript ve/ veya benzeri kullanmadan sadece CSS ile herhangi bir içeriği gizleme/ gösterme mümkün. Bunun elbette bir çok yolu var. Aşağıda bulduğum en kolay yol olarak görünüyor. Kodları gayet temiz.

CSS Kodları

4 satır sade CSS kodu yeterli.

showhide { margin-bottom: 0.4em; }
showhide .show { display: none; }
showhide:target .show { display: block; }
showhide:target .hide { display: none; }

HTML Kodları

Html kısmına ekleyeceğiniz kod örneği.

<div>Bu Bölüm Gizli</div>
<div id="xxxxx" class="showhide">
<div class="hide">
<a href="#xxxxx">Bölümü Göster/ Aç</a>
</div>
<div class="show">
<a href="#makehide">Bölümü Gizle/ Kapa>/a><br >
İstediğiniz göster/ sakla içeriği koyacağınız kısım</div>
</div>

xxxxx şeklinde gösterilen yerlere istediğiniz ismi verebilirsiniz.
Kaynak:CSS hide / show demo

NOTLAR

• Nerede nasıl kullanacağınız size kalmış.
• Kodlar hem sade hem html hem de CSS olarak geçerli.
• Tüm modern tarayıcılarda test ettim, sorunsuz çalışıyor.
• iOS cihaz tarayıcılarında da sorunsuz, dokunmatik olarak çalışıyor.

Biz de Kullanıyoruz

Bu sitede de kullanıyoruz. Yazıların altında gelen yorumları gizli hale getirdik. Ufak bir toggle butonu ile bu yorumları açıp kapatabiliyor, gösterip, gizleyebiliyorsunuz. Tamamen kullanıcı, ziyaretçi tercihine kalmış.