toggle icon

Sadece CSS ile İçerik Gizle Göster

- 725

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; }

WP Handle

WP HANDLE: All-in-one WordPress Service

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

Bir cevap veya yorum yazın

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


E-posta ile abone ol

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