Pernah melihat list hirarki yang bisa dibentangkan dan dilipat (expand-collapse) seperti berikut
Ada beraneka macam cara untuk membuatnya, namun penulis membuatnya dengan menggunakan javascript.
Berikut contoh source code-nya
<html>
<head>
<title>Pasal-Pasal</title>
<style>
A {text-decoration: none;}
</style>
<script language="javascript" type="text/javascript">
function Toggle(item) {
obj=document.getElementById(item);
visible=(obj.style.display!="none")
key=document.getElementById("x" + item);
if (visible) {
obj.style.display="none";
key.innerHTML="[+]";
} else {
obj.style.display="block";
key.innerHTML="[-]";
}
}
</script>
</head>
<body>
<h2>Pasal-Pasal</h2>
<hr/><hr/>
<b><a ID="xpasal1" name="pasal-1" href="javascript:Toggle('pasal1')">[+]</a>
Pasal 1</b><br>
<div ID="pasal1" style="display:none; margin-left:2em">
1. bla bla bla<br>
2. bli bli bli<br>
3. blu blu blu<br></div>
<b><a ID="xpasal2" name="pasal-2" href="javascript:Toggle('pasal2')">[+]</a>
Pasal 2</b><br>
<div ID="pasal2" style="display:none; margin-left:2em">
<ol>
<li>bla bla bla</li>
<li>bli bli bli</li>
<li>blu blu blu</li></ol></div>
<hr/><hr/>
<a href="#pasal-1">kembali ke pasal 1</a><br>
<a href="#pasal-2">kembali ke pasal 2</a>
</body>
</html>
Output Program
Labels:
web
Previous Article
