Javascript'te akordiyon sistemi düzensiz çalışıyor
Merhabalar. Bir sorum vardı. W3'den alıp bir akordiyon oluşturdum. Her akordiyonun içinde farklı bilgiler var. Birine tıklayınca diğeri kapanıyor. Yalnız bazen kapanmıyor. Tekrar tekrar tıklarken çalışmaya başlıyor. En basitinden localhost'u yeni açtığımda çalışmıyor, tıklarken tıklarken çalışıyor. Html kısmını yazmadım biraz uzun ama javascript kısmını yazıyorum. Bir yanlışım var mı acaba aşağıdaki kodlarda. Bir de aciliyeti yok ama bu kod kısaltılabilir mi, yani başka bir şekilde yazılabilir mi, onu öğreneyim?
<script>
var acilacakilkalan;
var acilacakikincialan;
var acilacakucuncualan;
var acilacakdorduncualan;
var acilacakbesincialan;
var acilacakaltincialan;
</script>
<script>
function ilkalanid() {
acilacakilkalan = document.getElementById("ilkalanid");
if(acilacakilkalan.style.display == "none") {
acilacakilkalan.style.display = "block";
acilacakikincialan.style.display = "none";
acilacakucuncualan.style.display = "none";
acilacakdorduncualan.style.display = "none";
acilacakbesincialan.style.display = "none";
acilacakaltincialan.style.display = "none";
} else {
acilacakilkalan.style.display = "none";
}
}
</script>
<script>
function ikincialanid() {
acilacakikincialan = document.getElementById("ikincialanid");
if(acilacakikincialan.style.display == "none") {
acilacakikincialan.style.display = "block";
acilacakilkalan.style.display = "none";
acilacakucuncualan.style.display = "none";
acilacakdorduncualan.style.display = "none";
acilacakbesincialan.style.display = "none";
acilacakaltincialan.style.display = "none";
} else {
acilacakikincialan.style.display = "none";
}
}
</script>
<script>
function ucuncualanid() {
acilacakucuncualan = document.getElementById("ucuncualanid");
if(acilacakucuncualan.style.display == "none") {
acilacakucuncualan.style.display = "block";
acilacakilkalan.style.display = "none";
acilacakikincialan.style.display = "none";
acilacakdorduncualan.style.display = "none";
acilacakbesincialan.style.display = "none";
acilacakaltincialan.style.display = "none";
} else {
acilacakucuncualan.style.display = "none";
}
}
</script>
<script>
function dorduncualanid() {
acilacakdorduncualan = document.getElementById("dorduncualanid");
if(acilacakdorduncualan.style.display == "none") {
acilacakdorduncualan.style.display = "block";
acilacakilkalan.style.display = "none";
acilacakikincialan.style.display = "none";
acilacakucuncualan.style.display = "none";
acilacakbesincialan.style.display = "none";
acilacakaltincialan.style.display = "none";
} else {
acilacakdorduncualan.style.display = "none";
}
}
</script>
<script>
function besincialanid() {
acilacakbesincialan = document.getElementById("besincialanid");
if(acilacakbesincialan.style.display == "none") {
acilacakbesincialan.style.display = "block";
acilacakilkalan.style.display = "none";
acilacakikincialan.style.display = "none";
acilacakucuncualan.style.display = "none";
acilacakdorduncualan.style.display = "none";
acilacakaltincialan.style.display = "none";
} else {
acilacakbesincialan.style.display = "none";
}
}
</script>
<script>
function altincialanid() {
acilacakaltincialan = document.getElementById("altincialanid");
if(acilacakaltincialan.style.display == "none") {
acilacakaltincialan.style.display = "block";
acilacakilkalan.style.display = "none";
acilacakikincialan.style.display = "none";
acilacakucuncualan.style.display = "none";
acilacakdorduncualan.style.display = "none";
acilacakbesincialan.style.display = "none";
} else {
acilacakaltincialan.style.display = "none";
}
}
</script>
Öncelikle alanları açacak butonları ayarlayalım.
Bu butonları kendimizce gruplandırmak için "sectionTabButton" diye bir class ekleyelim.
Hangi butonun hangi alanı açacağını belirtmek için de data-target-id gibi bir attribute ekleyelim.
Sonra içeriklerinizi tutacak alanlar için de "sectionContent" diye bir class ekleyelim.
Bu içeriklerin hangi butonla bağlantılı çalışacağını belirlemek için de data-section-id diye bir attribute ekleyelim.
Hangi alanın aktif olduğunu belirtmek için de "active" class'ını kullanalım.
Başlangıçta ilk alanın aktif olması için hem ilgili butona hem içeriğe bu class'ı ekleyelim.
<div>
<button class="sectionTabButton active" data-target-id="1">Alan 1</button>
<button class="sectionTabButton" data-target-id="2">Alan 2</button>
<button class="sectionTabButton" data-target-id="3">Alan 3</button>
<button class="sectionTabButton" data-target-id="4">Alan 4</button>
<button class="sectionTabButton" data-target-id="5">Alan 5</button>
<button class="sectionTabButton" data-target-id="6">Alan 6</button>
</div>
<div>
<div class="sectionContent active" data-section-id="1">Alan 1 içeriği</div>
<div class="sectionContent" data-section-id="2">Alan 2 içeriği</div>
<div class="sectionContent" data-section-id="3">Alan 3 içeriği</div>
<div class="sectionContent" data-section-id="4">Alan 4 içeriği</div>
<div class="sectionContent" data-section-id="5">Alan 5 içeriği</div>
<div class="sectionContent" data-section-id="6">Alan 6 içeriği</div>
</div>
Yalnızca "active" class'ına sahip içeriğin görünmesini, diğerlerinin gizli kalmasını istiyoruz.
Bunu javascript ile yapmak yerine css ile yapabiliriz.
.sectionContent { display:none /*...alanın diğer stilleri*/ }
.sectionContent.active { display:block; }
Şimdi butonları işler hale getiren script'i yazabiliriz.
Bir butona basıldığında, "active" class'lı butonun ve içeriğin bu class'ı silinmeli.
Basılan butona ve buna bağlı içeriğe "active" class'ı eklenmeli.
const $sectionTabButtons = document.querySelectorAll(".sectionTabButton");
const $sectionContents = document.querySelectorAll(".sectionContent");
// Aşağıdaki script'i üşendiğim için ChatGPT 3.5'e yazdırdım...
$sectionTabButtons.forEach(function ($button) {
$button.addEventListener("click", function () {
// Tüm butonlardan "active" class'ını kaldır
$sectionTabButtons.forEach($btn => {
$btn.classList.remove("active");
});
// Tüm içerik alanlarından "active" class'ını kaldır
$sectionContents.forEach($content => {
$content.classList.remove("active");
});
// Basılan butona "active" class'ını ekle
$button.classList.add("active");
// İlgili içeriği bul ve ona "active" class'ını ekle
const targetId = button.getAttribute("data-target-id");
const $targetContent = document.querySelector('.sectionContent[data-section-id="'+targetId+'"]');
$targetContent.classList.add("active");
});
});
Başına $ koyduğum değişkenler: Genel olarak bir değişkenin bir element tuttuğunu belirtmek için değişkenin başına $ işareti koyulur.
Zorunluluk değildir ama js geliştiricileri arasında bir standart olarak, kod anlaşılırlığını kolaylaştırmak için kullanılıyor.