Zeki Can - WordPress

Açılıp Kapanan İçerik Alanları Oluşturmak (Açıklama Kodu)

  Javascript    21 Haziran 2014
5 Yorum

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.

Açılır Kapanır Kutular

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>

Açılır Kapanır Tab

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>
Etiketler : , , , , , , ,


  Benzer Yazılar


  Yorumlar

Bir Cevap Yazın

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

Yapılan Yorumlar (5)

  • Özgür Yazar

    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

    Kasım 14, 2020 Cevapla
  • ŞerifHoca Yazar

    Başlıklar alt alta. onları yan yana yapabilir miyiz?

    Mart 1, 2022 Cevapla
    • Zeki Can Yazar

      Konunun altına yeni bir kod ekledim o işini görecektir. İlgili alanları kendine göre düzenleyerek kullanabilirsin.

      Mart 2, 2022 Cevapla
  • İmran Yazar

    İ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.

    Ağustos 14, 2023 Cevapla