Demo :
Contoh Pertama
Hanya sekedar contoh....
Contoh Kedua
Hanya sekedar contoh....
Contoh Ketiga
Hanya sekedar contoh....
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>
.iconspan{
float: right;
margin: 3px;
cursor:hand;
cursor:pointer;
font-weight: bold;
}
.eg-bar{
background-color: #EEF5D3;
font-weight: bold;
border: 1px solid black;
padding: 3px;
}
div.eg-bar{
width: 500px;
}
.icongroup1{
width: 500px;
}
Langkah kedua > Penempatan URL JavaScript
dibawah ]]></b:skin>
........
diatas </head>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/Tesembunyi%20dengan%20Switch%20Content%20Script.js" ></script>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/Tesembunyi%20dengan%20Switch%20Content%20Script%20II%20%28icon%20based%29.js"></script>
Langkah ketiga > Penempatan kode HTML
dibawah <body>
........
diatas </body>
<div class="eg-bar"><span id="faq1-title" class="iconspan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKFl6LuKVa-YdDLCRQqMh_Z84eSR7YiCpGNy5M6947Ey4LCYaOMmYlQoU-kB7LBngZ1iQDuRDPnt_ZwtdL1AamaRHjDUOy13L0nvX9QABh3P6VxaCDKcf-hQTO6VvVEXGEwlUY2b5xrZN8/s1600/Nano+Yulianto+-+minus.gif" /></span>Contoh Pertama</div>
<div id="faq1" class="icongroup1">
Hanya sekedar contoh....
</div>
<br />
<div class="eg-bar"><span id="faq2-title" class="iconspan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKFl6LuKVa-YdDLCRQqMh_Z84eSR7YiCpGNy5M6947Ey4LCYaOMmYlQoU-kB7LBngZ1iQDuRDPnt_ZwtdL1AamaRHjDUOy13L0nvX9QABh3P6VxaCDKcf-hQTO6VvVEXGEwlUY2b5xrZN8/s1600/Nano+Yulianto+-+minus.gif" /></span>Contoh Kedua</div>
<div id="faq2" class="icongroup1">
Hanya sekedar contoh....
</div>
<br />
<div class="eg-bar"><span id="faq3-title" class="iconspan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKFl6LuKVa-YdDLCRQqMh_Z84eSR7YiCpGNy5M6947Ey4LCYaOMmYlQoU-kB7LBngZ1iQDuRDPnt_ZwtdL1AamaRHjDUOy13L0nvX9QABh3P6VxaCDKcf-hQTO6VvVEXGEwlUY2b5xrZN8/s1600/Nano+Yulianto+-+minus.gif" /></span>Contoh Ketiga</div>
<div id="faq3" class="icongroup1">
Hanya sekedar contoh....
</div>
<br />
<script type='text/javascript'>
//<![CDATA[
var faq=new switchicon("icongroup1", "div")
faq.setHeader('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKFl6LuKVa-YdDLCRQqMh_Z84eSR7YiCpGNy5M6947Ey4LCYaOMmYlQoU-kB7LBngZ1iQDuRDPnt_ZwtdL1AamaRHjDUOy13L0nvX9QABh3P6VxaCDKcf-hQTO6VvVEXGEwlUY2b5xrZN8/s1600/Nano+Yulianto+-+minus.gif" />', '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUZVUz8HKvNQ2EhthIdYx3vRLp1daY6HLoxai3HjnRJylBf3frrKonsHOMovIKrH9ObxU38BIsuKyLEJPkWMfWrUrNOCfqhyphenhyphens1KnbYukZYya3bacHdyWIn3BxZMIUGuhtB7BX8W40irCIM/s1600/Nano+Yulianto+-+plus.gif" />')
faq.collapsePrevious(true)
faq.setPersist(false)
faq.defaultExpanded(0)
faq.init()
//]]>
</script>
Credit : Dynamic Drive
Alhamdulillah
1 comments:
walau ga pake jquery accordion, saya juga suka!!,
^_o
Posting Komentar