Sadece CSS ile İçerik Gizle Göster

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

Biz de Kullanıyoruz

Bu sitede de kullanıyoruz. Post sayfalarını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ış.

2.180
PAYLAŞ

Bir cevap ve/veya yorum yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir