Kali ini saya akan menunjukan cara membuat Expand-Collapse Toggle Element Div.
Berikut ini tampilannya pada saat kondisi expand div, content div akan show.
Jika kita click icon collapse maka content div akan hide seperti tampilan berikut ini.
Pertama kita siapkan coding HTML sebagai berikut:
<body>
Click collapse/expand image to toggle the content below.
<div id="headerDiv">
<a id="imgHeader" href="javascript:toggle('myContent','imgHeader');">
<img title="Collapse" alt="" src="collapse.png" border="0" /></a>
<div id="titleText">Demo Toggle Element Div</div>
</div>
<div style="clear: both;"></div>
<div id="contentDiv">
<div id="myContent" style="display: block;">
<ul>
<li>This is line one of the content.</li>
<li>This is line two of the content.</li>
<li>This is line three of the content.</li>
</ul>
</div>
</div>
<div style="clear: both;"></div>
This is the demo of collapse/expand element.
</body>
Kemudian kita berikan sentuhan presentasi dengan CSS berikut:
<style type="text/css">
#headerDiv, #contentDiv {float:left;width:510px;}
#headerDiv a {float:right;margin:10px 10px 5px 5px;}
#myHeader {font-size:1.1em;font-weight:bold;margin:5px;float:left;}
#titleText {font-size:1.3em;font-weight:bold;margin:8px;}
#headerDiv {background-color:#a0a0a0;color:#ffffff;}
#contentDiv {background-color:#f0f0f0;}
#myContent {margin:1px;}
</style>
Icon berupa image expand.png dan collapse.png bisa Anda buat sendiri dengan dengan print screen di MS Paint.
Ketika user click icon collapse maka #contentDiv akan dibuat hidden oleh Javascript.
Begitu juga ketika user click icon expand maka #contentDiv akan dibuat show oleh Javascript.
Berikut ini coding javascriptnya:
<script type="text/javascript">
function toggle(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="expand.png" title="Expand" border=0>';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="collapse.png" title="Collapse" border=0>';
}
}
</script>
Saya sudah mencobanya dan berhasil dengan baik. Selamat mencoba.
Coding Website 