Cara Membuat Accordion Content

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script src='https://sites.google.com/site/archivesiugi/javascr/accordion.js' type='text/javascript'>

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>


<style type="text/css">

.mypets{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
padding: 2px 5px;
border: 1px solid gray;
background: #E1E1E1;
}

.openpet{ /*class added to contents of 1st demo when they are open*/
background: yellow;
}

.technology{ /*header of 2nd demo*/
cursor: hand;
cursor: pointer;
font: bold 14px Verdana;
margin: 10px 0;
}

.openlanguage{ /*class added to contents of 2nd demo when they are open*/
color: green;
}

.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/
color: red;
}

</style>

<script type='text/javascript'>
//<![CDATA[
//Initialize first demo:
ddaccordion.init({
headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

//Initialize 2nd demo:
ddaccordion.init({
headerclass: "technology", //Shared CSS class name of headers group
contentclass: "thelanguage", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "<img src='http://img7.imageshack.us/img7/1765/plusb.gif' style='width:13px; height:13px' /> ", "<img src='http://img40.imageshack.us/img40/9513/minuspd.gif' style='width:13px; height:13px' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

//]]></script>

<h2>Contoh 1:</h2>
<a href="#" onclick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a> | <a href="#" onclick="ddaccordion.collapseone('mypets', 0); return false">Collapse 1st header</a> | <a href="#" onclick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a>

<h3 class="mypets">Harimau Siberia</h3>
<div class="thepet">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Siberischer_tiger_de_edit02.jpg/150px-Siberischer_tiger_de_edit02.jpg" />
Harimau Siberia adalah subspesies langka harimau yang merupakan hewan alami terbesar dalam suku Felidae. Jenis harimau ini juga dikenal dengan nama Harimau Amur, Korea, Manchuria, atau Tiongkok Utara. Harimau Siberia saat ini terancam punah. Kini subspesies ini telah hampir punah total dari Korea Selatan dan sebagian kecil hidup di Rusia, Manchuria dan Korea Utara.
</div>

<h3 class="mypets">Lumba-Lumba Hidung Botol</h3>
<div class="thepet">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Bottlenose_Dolphin_KSC04pd0178.jpg/150px-Bottlenose_Dolphin_KSC04pd0178.jpg" />
Lumba-lumba hidung botol (Tursiops truncatus) adalah spesies lumba-lumba yang paling umum dan paling dikenal orang. Habitatnya berada di perairan hangat di seluruh dunia dan dapat ditemui di hampir seluruh perairan kecuali Samudra Arktik dan Samudra Selatan. Lumba-lumba hidung botol berwarna abu-abu yang bervariasi dari abu-abu gelap di bagian atas dekat sirip punggung ke abu-abu muda keputih-putihan di bagian bawah. Corak warna ini membuat mereka sulit dilihat dari atas dan bawah. Lumba-lumba hidung botol dewasa memiliki panjang antara 2 sampai 4 meter dan berat dari 150 sampai 650 kilogram.
</div>

<h3 class="mypets">Arwana Asia</h3>
<div class="thepet">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Arowana.jpg/150px-Arowana.jpg" />
Arwana Asia (Scleropages formosus), adalah salah satu spesies ikan air tawar dari Asia Tenggara. Ikan ini memiliki badan yang panjang; sirip dubur terletak jauh di belakang badan. Arwana Asia umumnya memiliki warna keperak-perakan. Arwana Asia juga disebut "Ikan Naga" karena sering dihubung-hubungkan dengan naga dari Mitologi Tionghoa. Spesies ini termasuk jenis spesies langka yang masuk red list IUCN tahun 2004.
</div>

<h2>Contoh 2:</h2>
<a href="#" onclick="ddaccordion.collapseall('technology'); return false">Collapse all</a> | <a href="#" onclick="ddaccordion.expandall('technology'); return false">Expand all</a>

<div class="technology">
What is JavaScript?
</div>
<div class="thelanguage">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>
<div class="technology">
Difference betwen Java &amp; JavaScript?
</div>
<div class="thelanguage">
Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
</div>
<div class="technology">
What is Ajax?
</div>
<div class="thelanguage">
Ajax is a group of inter-related web development techniques used for creating interactive web applications. A primary characteristic is the increased responsiveness and interactiveness of web pages achieved by exchanging small amounts of data with the server "behind the scenes" so that the entire web page does not have to be reloaded each time the user performs an action. This is intended to increase the web page's interactivity, speed, functionality, and usability.
</div>