Zeki Can - WordPress

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

  Javascript    21 Haziran 2014
Yorum Yok

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 and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Sandeep Gangadharan | http://www.sivamdesign.com/scripts/ */
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.

104 okunma

Etiketler : , , , , , , ,

  Benzer Yazılar


  Yorumlar

Bir Cevap Yazın

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

Bu yazıya henüz yorum yapılmamıştır, yazı hakkındaki düşüncelerinizi paylaşmaktan çekinmeyin.

  Arama Yap

  Arşivler