Konu başlığında da gördüğünüz gibi ve verecek olduğum olduğum örnekte bu kodu farklı özellikler ve amaçlar için kullanabilirsiniz.Özellikle başlık açıklamaları veya yazılarınız altında aynı kategoriye ait farklı başlık ve açıklamalarını gösterebilirsiniz.
<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] Example & Explanation:</div>
<div id="a1" class="texter">
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam
</div>
<div onClick="openClose('a2')" class="mainExpand">2] Compatibility:</div>
<div id="a2" class="texter">
Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus
</div>
<div onClick="openClose('a3')" class="mainExpand">3] Notes:</div>
<div id="a3" class="texter">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
</div>
Yukarıda ki kod içerisinde kırmızı renkle belirttiğim kısımlara başlık metinleri mavi kısımlara ise başlıklara ait açıklamalarını yazacak olduğunuz bölümlerdir.
Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin