Sadece CSS ile Göster/Gizle Buttonu

Divlerin veya herhangi bir elemanın görünürlüğünü açıp kapatmak için JavaScript ile birkaç satır kod karalamanız gerekmekte. Fakat bu makalemizde size küçük bir sır vereceğiz.

Bildiğiniz gibi form öğesi olan checkbox‘ın işaretlenip işaretlenmediğini CSS ile denetleyebiliyoruz. Kafanızda bir ampul yandı mı? Hadi konuyu biraz detaylandıralım.

ÖRNEĞİ GÖRÜNTÜLE

CSS ile AÇ / KAPA

Yazacağımız kodları kelimelere dökerek başlayalım. Bir checkbox oluşturacağız. Checkbox’a tik koyulduğunda objeyi gizleyeceğiz, tik kaldırıldığında ise objeyi görünür kılacağız. Tabii bu işlem esnasında Gizle / Göster metnini içeren bir label kullanmakta fayda var.

Nasıl yapılır?

Sizler için hazırladığım örnekte aç/kapa işlemini bir resim üzerine uygulayacağım. Bu teknik reklamlar üzerinde de kullanılabilir. Böylece reklamdan kurtulmak isteyen ziyaretçileriniz “Reklamı gizle” linkini tıklayarak onları görünmez kılar.

HTML kodları ile başlayalım.

İlk olarak <label>‘i ekleyelim. Daha sonra bu label için imleç (cursor) belirleyeceğiz ki üzerine gelindiğinde link gibi gözüksün.

<label for="kutucuk">Göster / Gizle</label>

Gördüğünüz gibi kutucuk id‘sine sahip form öğesi ile ilişkilendirdik. Şimdi kutucuk id’li checkbox’ı ekleyelim.

<input type="checkbox" id="kutucuk" class="ackapa" checked>

Tasarım öğeleri için ackapa isimli bir class belirledik. Ayrıca satırın en sonuna checked ekleyerek varsayılan değeri “işaretli” olarak ayarladık. Sırada gösterip gizleyeceğimiz objeyi eklemek var.

<img src="https://www.adobewordpress.com/ads/300x250.jpg"  class="adobewordpress">

Yukarıdaki resmi kullanalım.

Sırada CSS kodları var.

İlk olarak ackapa classına sahip tüm input öğelerini gizleyelim. Böylece selectbox görünürlüğünü yitirsin.

input.ackapa{display:none;}

Yukarıda bahsettiğim gibi label için imleç belirleyeceğiz. Biz beraberinde display:block kullandık. Böylece hemen alta ekleyeceğimiz resim ile aynı satırda gözüküp karmaşaya sebep olmayacak. Fakat isterseniz siz display:block kullanmaya bilirsiniz.

label.ackapa{cursor:pointer; display:block;} 

Ve şimdi en önemli adımı atacağız. Eğer selectbox seçiliyse objeyi görünmez kılacağız. Nasıl mı?

input.ackapa:checked+ .adobewordpress{display:none;} 

Ve işlem tamam.

Kapanış

JavaScript veya jQuery‘e gerek duymadan gayet pratik bir Aç/Kapa işlemi hazırladık.

Daha önce de söylediğim gibi bu teknik ile sitenizdeki reklamlar için gizle/göster seçeneği yapacaksanız bu söylediklerimize kulak verin. Özellikle AdSense başta olmak üzere birçok reklam şirketi yayınlarının gizlenilebilir olmasına karşı. O yüzden Aç/Kapa işlemini reklamlarınıza uygulayacaksanız iyi düşünün.

İyi çalışmalar.