Home > JavaScript Blogger > Tersembunyi dengan Switch Content Script
JavaScript membuat konten menyatu dan tersembunyi. Jika anda klik judulnya maka konten yang ada didalamnya akan terlihat. Untuk membuat rapi juga.
Demo :
Contoh Pertama
Hanya sekedar contoh...
Contoh Kedua
Hanya sekedar contoh...
Contoh Ketiga
Hanya sekedar contoh...
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 dan URL JavaScript
dibawah ]]></b:skin>
........
diatas </head>
<style type='text/css'>
.handcursor{cursor:hand;cursor:pointer;}
</style>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/Tesembunyi%20dengan%20Switch%20Content%20Script.js" ></script>
Langkah kedua > Penempatan kode HTML dan JavaScript
dibawah <body>
........
diatas </body>
Contoh yang pertama :
<h3 id='bobcontent1-title' class='handcursor'>Contoh Pertama</h3>
<div id='bobcontent1' class='switchgroup1'>
Hanya sekedar contoh...
</div>
<h3 id='bobcontent2-title' class='handcursor'>Contoh Kedua</h3>
<div id='bobcontent2' class='switchgroup1'>
Hanya sekedar contoh...
</div>
<h3 id='bobcontent3-title' class='handcursor'>Contoh Ketiga</h3>
<div id='bobcontent3' class='switchgroup1'>
Hanya sekedar contoh...
</div>
<script type='text/javascript'>
//<![CDATA[
// MAIN FUNCTION: new switchcontent("class name", "[optional_element_type_to_scan_for]") REQUIRED
// Call Instance.init() at the very end. REQUIRED
var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
bobexample.setStatus('<img src="http://img242.imageshack.us/img242/5553/opencq8.png" /> ', '<img src="http://img167.imageshack.us/img167/7718/closedy2.png" /> ')
bobexample.setColor('darkred', 'black')
bobexample.setPersist(true)
bobexample.collapsePrevious(true) //Only one content open at any given time
bobexample.init()
//]]>
</script>
Contoh yang kedua :
<h3 id='joecontent1-title' class='handcursor'>Contoh Pertama</h3>
<p id='joecontent1' class='switchgroup2'>
Hanya sekedar contoh...
</p>
<h3 id='joecontent2-title' class='handcursor'>Contoh Kedua</h3>
<p id='joecontent2' class='switchgroup2'>
Hanya sekedar contoh...
</p>
<h3 id='joecontent3-title' class='handcursor'>Contoh Ketiga</h3>
<p id='joecontent3' class='switchgroup2'>
Hanya sekedar contoh...
</p>
<script type='text/javascript'>
//<![CDATA[
var joeexample=new switchcontent("switchgroup2", "p") //Limit scanning of switch contents to just "p" elements
joeexample.setStatus('[open] ', '[closed] ')
joeexample.setColor('green', 'red')
joeexample.collapsePrevious(false)
joeexample.setPersist(false)
joeexample.defaultExpanded(0,1)
joeexample.init()
//]]>
</script>
Credit : Dynamic Drive
Alhamdulillah
