toggle icon

Sadece CSS ile İçerik Gizle Göster

- 699

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. 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ış.

Bloga e-posta ile abone ol

Bu bloga abone olmak ve e-posta ile bildirimler almak için e-posta adresinizi girin.

PAYLAŞ

Bir cevap veya yorum yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


Bu site spamları azaltmak için Akismet kullanmaktadır. Yorum verilerinizin nasıl işlendiğini öğrenmek için; Akismet Privacy