Before Expandable Panel
This is epandable panel
After Expandable Panel
You can make collapsible / expandable panel as you see above with following HTML, JavaScript and CSScode.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Collapsable Panel</title>
</head>
<body onLoad="init();">
<script language="javascript">
function init() {
document.getElementById('expandablePanel').style.display = 'none';
}
function toggleDiv(divid) {
if (document.getElementById(divid).style.display == 'none'
|| document.getElementById(divid).style.display == '') {
document.getElementById(divid).style.display = 'block';
} else {
document.getElementById(divid).style.display = 'none';
}
}
</script>
<style type='text/css'>
#expandableArea {
position: absolute;
top: 45px;
left: 200px;
width: 830px;
height: 500px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#expandablePanel {
width: 830px;
height: 200px;
float: right;
background: #F1F1F1;
}
</style>
<div id="expandableArea">
<div><hr>Before Expandable Panel<hr></div>
<div id="expandablePanel">
<br><hr>This is epandable panel<hr><br>
</div>
<div class="line"><br><hr>After Expandable Panel<hr><br></div>
<div id="button_to_expand">
<a href="javascript:toggleDiv('expandablePanel');" >Click Here to Show/Hide Panel</a>
</div>
</div>
</body>
</html>
In the above code onLoad of body we call init() method which hides the panel and on click on the link we call toggleDiv method which just handles showing or hiding of the div block.
