Membuat Menu Show/Hide(Spoiler)

Judul Spoiler 1

Judul Spoiler 2 =>

Contoh diatas Code Scriptnya :
(Click Mouse untuk highlight all)

<br /> <br /> <style type="text/css"><br /> #headerDiv, <br /> #contentDiv { float: left; width: 510px; } <br /> #titleText { float: left; font-size: 1.1em; <br /> font-weight: bold; margin: 5px; } <br /> #myHeader { font-size: 1.1em; font-weight: bold; margin: 5px; } <br /> #headerDiv { background-color: #0037DB; color: #9EB6FF; } <br /> #contentDiv { background-color: #FFE694; } <br /> #myContent { margin: 5px 10px; } <br /> #headerDiv a { float: right; margin: 10px 10px 5px 5px; } <br /> #headerDiv a:hover { color: #FFFFFF; } </style> <br /> <br /> <script language="javascript"> function toggle2(showHideDiv, <br /> switchTextDiv) {  var ele = document.getElementById(showHideDiv);  <br /> var text = document.getElementById(switchTextDiv);  <br /> if(ele.style.display == "inline") {       ele.style.display = "none";   <br /> text.innerHTML = "<img src='http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/plus.gif'/>";    }  <br /> else {   ele.style.display = "inline";   text.innerHTML = "<img src='http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/minus.gif'/>";  } } <br /> </script> <br /> <body> <div ;="" style="width: 550px;"> <br /> <br /> <fieldset> <br /> <legend>Judul Spoiler 1<br /> </legend> <br /> <div id="headerDiv"> <br /> <div id="titleText"> Judul Spoiler 2 =&gt;<br /> </div> <br /> <a href="javascript:toggle2('myContent','myHeader');" id="myHeader"><br /> <img src="http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/plus.gif" /></a><br /> </div> <br /> <div style="clear: both;"> <br /> </div> <br /> <div id="contentDiv"> <br /> <div id="myContent" style="display: none;"> DI SINI ISI SPOILER ( BISA IMAGE, JAVASCRIPT DLL ) <br /> </div> </div> </fieldset> </div> </body><br /> <br />

Untuk Contoh diatas Kode Scriptnya :

Selamat Mencoba semoga bermanfaat