Voortgezet onderwijs | ThinkQuest Jr Webplek

Kennisnet.nl

Hoe maak je een... Inhoudsopgave (inklapbaar)

Gepubliceerd op 21 april 2006

Functie: Je kunt veel tekst op een pagina overzichtelijk maken met een inhoudsopgave, die in- en uitklapbaar is (en de pagina zo compact kan blijven). Deze kennis is ook toe te passen om stukken tekst zichtbaar/onzichtbaar te maken.
Algemene werking: Er wordt een inhoudsopgave gemaakt (let op het aanwijzen van id's op de tags). In de lijst worden referenties gemaakt naar onderstaande stukken tekst m.b.v. <a href="#verwijzing">. Met behulp van Javascript kan het geheel worden in- of uitgeklapt door de CSS eigenschap display aan te passen

Gerelateerde kennis:

Uitklapmenu (Hoe maak je een..)
Basiscursus Javascript en het D.O.M. (artikel)
Tekst voor het Internet (Hoe maak je een..)
Lay-out (Hoe maak je een..)

Methode 1: Javascript en het DOM (aangeraden)

Bekijk hier
Download hier [Onbekend 0 Kb ]

HTML bestand

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title></title>
<script type="text/javascript">
inh_status = "aan";
function inh_wissel()
 {
  var inh_opgave = document.getElementById("inh_opgave");
  if(inh_status == "aan")
  {
   inh_opgave.style.display = "none";
   inh_status = "uit";
   verander_wissel_tekst("[laat zien]")
  }
  else
  {
   inh_opgave.style.display = "block"; 
   inh_status = "aan";
   verander_wissel_tekst("[verberg]")
  }
 }
 function verander_wissel_tekst(nieuwe_tekst){
  var inh_link = document.getElementById("inh_link");
  inh_link.firstChild.nodeValue = nieuwe_tekst;
 }
 function maak_inh_wissel()
 {
  var inh_link = document.getElementById("inh_link");
  inh_link.onclick = function(){
   inh_wissel();
   return false;
  }
 }
 window.onload = maak_inh_wissel;
</script>
</head>
<body>
<h3>inhoudsopgave</h3><a id="inh_link" href="#">[verberg]</a>
<ol id="inh_opgave">
 <li><a href="#inl">Inleiding</a></li>
 <li><a href="#hst1">Hoofdstuk 1</a></li>
 <li><a href="#hst2">Hoofdstuk 2</a></li>
 <li><a href="#hst3">Hoofdstuk 3</a></li>
 <li><a href="#hst4">Hoofdstuk 4</a></li>
</ol>
<a name="inl"></a><h2>Inleiding</h2>
<p>tekst</p>
<a name="hst1"></a><h2>Hoofdstuk 1</h2>
<p>tekst</p>
<a name="hst2"></a><h2>Hoofdstuk 2</h2>
<p>tekst</p>
<a name="hst3"></a><h2>Hoofdstuk 3</h2>
<p>tekst</p>
<a name="hst4"></a><h2>Hoofdstuk 4</h2>
<p>tekst</p>
</body>
</html>

LET OP: Het is slimmer om de Javascript code in een eigen bestand te plaatsen en vanuit de HTML pagina te verwijzen met

Verdere uitleg en varianten

http://www.wikipedia.org/
Bekijk een toepassing van deze functie op de bekende Wikipedia

http://javascript.internet.com/navigation/build-toc.html
Deze uitbreiding bouwt automatisch een inhoudsopgave