Merhaba arkadaşlar, bugün sizlerle paylaşacağım kod bazı sitelerde rastladığınız açılır kapanır açıklama kodları. Genelde ürün satışı yapılan sitelerde daha çok karşımıza çıkıyor bu kod. Ürün özelliğine tıklayınca sayfa yenilenmeden ürün özellikleri geliyor, Ürün yorumlarına tıklayınca yorumlar kısmı geliyor gibi. Bugünkü kodda bu sistemin temel seviyesi. Alttaki resimdeki gibi bir alan elde edeceğiz. Hangi başlığa tıklarsanız o açılarak gözükecek.
Resimde 1) İçindekiler başlığına tıklayınca içindekiler tabı açılıyor. Diğer başlıklara tıklayınca da açılı olan başlık kapanıp tıkladığınız başlık açılıyor. Bu şekilde istediğiniz kadar çoğaltıp ekleyebilirsiniz. İstediğiniz gibi kodları kullanabilirsiniz.
Örnek Kullanımını vereceğim ama bende çalışmayacak (Javascript editörü kullanarak deneyebilirsiniz).
Kodları online javascript editörü olan js.do sitesinden deneyebilirsiniz. Tarayıcınıza js.do yazın ve enter layın. Altta verdiğim kodları sol tarafa yapıştırın ve üstten Run Code butonuna tıklayın.
<script type="text/javascript">
/* This script ZekiCan.Net de sunuldu. */
if (document.getElementById) {
document.write('<style type="text/css">.texter {display:none; border-left:white 20px solid; color:#404040; font: .9em verdana, arial, helvetica, sans-serif; margin-bottom: 12px;}</style>') }
var divNum = new Array("a1","a2","a3"); // at the left you should add a1, a2 etc. for each header you wish to include
// so if you want 4 headers you should add a1, a2, a3, a4 in the format shown
// enclosed in double quotes
function openClose(theID) {
for(var i=0; i < divNum.length; i++) {
if (divNum[i] == theID) {
if (document.getElementById(divNum[i]).style.display == "block") { document.getElementById(divNum[i]).style.display = "none" }
else {
document.getElementById(divNum[i]).style.display = "block"
}
} else {
document.getElementById(divNum[i]).style.display = "none"; }
}
}
</script>
<style>
.mainExpand {
cursor:hand;
cursor:pointer;
font: bold .9em verdana, arial, helvetica, sans-serif;
</style>
<div onClick="openClose('a1')" class="mainExpand">1) İçindekiler:</div>
<div id="a1" class="texter">
Bu kısmıma bir açıklama girebilirsiniz. İçeriğiniz hakkında fikir bilgilendirme yapabilirsiniz. ZekiCan.Net
</div>
<div onClick="openClose('a2')" class="mainExpand">2) Nasıl Yapılır?</div>
<div id="a2" class="texter">
Yine örnek olarak bu kısımda buraya istediklerinizi yazın.
</div>
<div onClick="openClose('a3')" class="mainExpand">3) İndirme Linkleri:</div>
<div id="a3" class="texter">
Buraya eğer sitenizde dosyaa paylaşıyorsanız onun linkini koyabilirsiniz. https://zekican.net mesela.
</div>
Uygun yerlerde yapacağınız değişiklikle güzel bir açılıp kapanan açıklamalar ya da tablar oluşturabilirsiniz.
Bootstrap 5 ile Yan yana Tab Alanı Oluşturmak
Bu kodun çalışması için bootstrap kütüphanesinin eklenmesi gerek.
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”>
Bu kodu <head> etiketleri arasına ekleyerek stil kütüphanesini sitenize eklemiş olursunuz.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Anasayfa</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profilim</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">İletişim ZekiCan.Net</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">İçerikler burada olacak</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">İçerikler burada olacak...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">İçerikler burada olacak...</div>
</div>
Merhaba hocam peki bir üst menü oluşturmak istediğimizde nasıl yapıyoruz? Yani fihrist yazalım tıklayınca içindekiler açılsın içindekilere tıklayınca içindekiler tabı açılsın
iç içe kodlar oluşturarak yazabilirsiniz. Çok fazla mı var ?
Başlıklar alt alta. onları yan yana yapabilir miyiz?
Konunun altına yeni bir kod ekledim o işini görecektir. İlgili alanları kendine göre düzenleyerek kullanabilirsin.
İyi günler. Benim sayfamda bir repeater var ve bu repeater’ın içinde div içerisinde verileri gösteriyorum. Yukarıda verdiğiniz TAB alanı kodunu ekledim ancak divlerden hangisinde tab değiştirdiğim farketmeksizin sadece en üstteki div tab değiştiriyor bunu nasıl uyarlayabilirim ? Yardımcı olursanız çok sevinirim.