SOURCE CODE:
<html>
<head>
<title>
collapse
</title>
<script type="text/javascript"src="blockcollapse.js">
</script>
</head>
<body onload="makeCollapsible('collapse1')";>
<ol id="collapse1">
<li>first element of ordered list.</li>
<li>second element.</li>
<li>third element</li>
</ol>
</body>
</html>
function makeCollapsible(elementId)
{
var element=window.document.getElementById(elementId);
if(element)
{
var div=window.document.createElement("div");
element.parentNode.insertBefore(div,element);
var button=window.document.createElement("button");
div.appendChild(button);
button.setAttribute("type","button");
var buttonText=window.document.createTextNode("click to collapse");
button.appendChild(buttonText);
button.setAttribute("onclick","toggleVisibility(this,'"+elementId+"');");
}
return;
}
function toggleVisibility(button,elementId)
{
var element=window.document.getElementById(elementId);
if(element)
{
if(element.style.display=="none")
{
element.style.display="block";
button.childNodes[0].data="click to collapse";
}
else
{
element.style.display="none";
button.childNodes[0].data="click to expand";
}
}
return;
}
No comments:
Post a Comment