JavaScript Kullanarak Göster/Gizle Fonksiyonelliği Oluşturmak

Blog Gönderisi Resmi

Hizmetlerimiz hakkında bilgi almak için tıklayın.

Web geliştirmede, kullanıcıların sayfa üzerindeki belirli öğeleri gösterip gizlemesine izin vermek, interaktif ve kullanıcı dostu arayüzler oluşturmanın temel yollarından biridir. JavaScript, bu tür dinamik etkileşimleri kolaylıkla gerçekleştirmemize olanak tanır. Bu makalede, basit bir “göster/gizle” işlevselliğinin nasıl uygulanacağını adım adım inceleyeceğiz.

HTML Yapısı


Öncelikle, HTML yapımızı oluşturalım. Bir buton ve gösterilecek/gizlenecek bir içerik elemanı ekleyeceğiz:


 <button id="toggleButton">Göster/Gizle</button>
 <div id="content" style="display: none;">
    Burası gösterilecek veya gizlenecek içeriktir.
</div>
 

Burada, içeriği başlangıçta gizli tutmak için style="display: none;" kullanıyoruz.

JavaScript Fonksiyonu


Şimdi, göster/gizle işlevselliğini gerçekleştirecek JavaScript kodunu ekleyelim:


document.getElementById("toggleButton").addEventListener("click", function() {
    var content = document.getElementById("content");
    if (content.style.display === "none") {
        content.style.display = "block";
    } else {
        content.style.display = "none";
    }
});

Bu kod parçası şu işlemleri gerçekleştirir:

  1. “toggleButton” ID'sine sahip butona bir tıklama olay dinleyicisi ekler.
  2. Tıklama gerçekleştiğinde, “content” ID'sine sahip öğeyi bulur.
  3. Öğenin görüntüleme durumuna göre, onu ya gizler ya da gösterir.

CSS ile İyileştirmeler


Ek olarak, gösterilen içeriğin daha estetik görünmesi için bazı CSS stillemeleri yapabiliriz:


<style>
#content {
    border: 1px solid #ddd;
    margin-top: 10px;
    padding: 15px;
    display: none; /* Başlangıçta gizli */
}
</style>

Kullanıcı Deneyimini Düşünmek


Bu fonksiyonelliği daha da geliştirmek için, butonun metnini değiştirerek kullanıcıya mevcut durum hakkında geri bildirim sağlayabiliriz. İçeriğin gösterilip gizlenme durumuna göre “Göster” veya “Gizle” yazısı değişebilir.

JavaScript kullanarak web sayfanızda dinamik göster/gizle işlevselliği eklemek, kullanıcı etkileşimini artırmada etkili bir yöntemdir. Bu basit örnek, interaktif web uygulamaları oluşturmanın temellerinden biridir ve benzer mantıklar, daha karmaşık özellikler geliştirmek için de kullanılabilir.

Sizin İçin Önerdiklerimiz

Blog Resim
JavaScript Büyük & Küçük Harf Dönüşümü

JavaScript

Türkçe karşılığı "büyük ve küçük harflere dönüştürme" olan ".toUpperCase()" ".toLowerCase()" fonksiyonları, JavaScript'te string (metin) veri tipinde..

Devamını Oku
Blog Resim
JavaScript Fonksiyonları ve Örnekleri Nelerdir?

JavaScript

Günümüzün en popüler programlama dillerinden biri olan JavaScript, web sayfalarına dinamizm katarak kullanıcı deneyimini arttıran çeşitli..

Devamını Oku
Blog Resim
Node.js ile POST İsteği Gönderme ve İşleme

JavaScript

Node.js, sunucu tarafı işlemleri gerçekleştirmek için güçlü bir platformdur. Bu platformu kullanarak, web istemcilerinden gelen POST isteklerini işleyebilirsiniz. Bu makalede, Node.js kullanarak POST isteği gönderme ve alınan veriyi işleme adımlarını öğreneceğiz.

Devamını Oku
Blog Resim
JavaScript Nedir? Ne İçin Kullanılır?

JavaScript

JavaScript, web sitelerinde dinamik içerikler yaratmak ve etkileşimi arttırmak için kullanılan bir programlama dilidir. Başta tarayıcılar olmak üzere..

Devamını Oku