Posting dulua ah sedikit ngisi waktu luang, kali gua mau ngepost cara membuat tombol hide show pada html. Kemaren sih rada ngeliat disalah satau forum,nah gua coba pelajari dan ya kali aja bermanfaat :D
Ok untuk tombol hide show sendiri bisa langsung simple menggabungkan kode HTML dengan CSS,dimana kita bisa gunain style CSS untuk merubah beberapa bagian yang kita mau. dan berikit kode HTML yang gua buat dan kita langsung gabungin aja style CSS nya dalam satu Koding HTML,bisa juga dibuat menggunakan href style CSS kita untuk lebih rapi,tapi tergantung kebutuhan.
<html>
<head>
<title>Untitled Document</title>
<link rel=”stylesheet” h />
<style type=”text/css” hr>
<!–
body {
background-color: #000000;
}
–>
</style></head>
<head>
<title>Untitled Document</title>
<link rel=”stylesheet” h />
<style type=”text/css” hr>
<!–
body {
background-color: #000000;
}
–>
</style></head>
<body>
<div id=”container”
style=”width:500px;
height:150px;
padding-top:25px; margin:0 auto; padding:”>
style=”width:500px;
height:150px;
padding-top:25px; margin:0 auto; padding:”>
<div id=”content” style=”padding:5px 5px 5px 5px; background:#CCCCCC; border-radius:5px;” >
<div>
<div id=”boxisi” style=”margin-bottom: 2px; font-family:’Comic Sans MS’”><b><small>Klik show untuk melihat</small></b>
<input value=”Show” style=”background:#00FF33;
margin: 0px; padding: 0px; width: 60px; height:30px;
border-radius:15px;
font-size: 10px;” onclick=”if (this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display != ”) { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ”; this.innerText = ”; this.value = ‘Hide’; } else { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ‘none’; this.innerText = ”; this.value = ‘Show’; }” type=”button” />
</div>
<div id=”boxisi” style=”margin-bottom: 2px; font-family:’Comic Sans MS’”><b><small>Klik show untuk melihat</small></b>
<input value=”Show” style=”background:#00FF33;
margin: 0px; padding: 0px; width: 60px; height:30px;
border-radius:15px;
font-size: 10px;” onclick=”if (this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display != ”) { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ”; this.innerText = ”; this.value = ‘Hide’; } else { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ‘none’; this.innerText = ”; this.value = ‘Show’; }” type=”button” />
</div>
<div style=”border: 1px inset; margin: 0px; padding: 6px;”>
<div id=”kolomisi” style=”display:none;”>
Masukan tulisanmu di sini
<p>Cara Membuat Tombol Show Hide </p>
<p> http://wwww.batrasaputra.com </p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Masukan tulisanmu di sini
<p>Cara Membuat Tombol Show Hide </p>
<p> http://wwww.batrasaputra.com </p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
:) Berikut Hasilnya :)
Klik show untuk melihat
0 komentar:
Posting Komentar