Home Ontwerp je site HTML DHTML - Tekst in- en uitklappen
DHTML - Tekst in- en uitklappen
Het kan handig zijn als je tekst met een muisklik tevoorschijn kunt halen. Dit kan erg plaatsbesparend zijn en zo kun je bijvoorbeeld ook het gebruik van pop-ups vermijden.
Naast tekst kun je natuurlijk op dezelfde manier ook afbeeldingen, tabellen en andere elementen tevoorschijn toveren.

Verborgen inhoud aanmaken

We beginnen met het maken van de hyperlinks én de inhoud die tevoorschijn zal komen bij het klikken op de link.

De inhoud die tevoorschijn zal komen stoppen we in een div-tag. In dit voorbeeld maken we 2 div's, maar je kunt dit artikel natuurlijk ook gebruiken voor één of meerdere div's.

<a href="javascript:showOrHide('layer1')">Toon/verberg</a>
<a href="javascript:showOrHide('layer2')">Toon/verberg</a>

<div id="layer1">Dit is layer 1. </div>
<div id="layer2">Dit is layer 2. </div>
Zoals je merkt linken we niet naar een bestand, maar naar een javascriptfunctie die we later zullen schrijven. We roepen in deze functie de variabele layer1 en layer2 op; deze variabelen hebben zijn dezelfde als de namen van de div's.

Verbergen / tonen toevoegen

We gaan nu de functie schrijven die ervoor zal zorgen dat we de tekst daadwerkelijk kunnen verbergen én terug tonen
<script type="text/javascript">
<!--
function showOrHide(value)
{
  if(document.getElementById(value).style.visibility == 'hidden')
  {
    document.getElementById(value).style.visibility = 'visible';
  }
  else
  {
  document.getElementById(value).style.visibility = 'hidden';
  }
}
//-->
</script>


Het script controleert de "zichtbaarheid" van het element. Is het element onzichtbaar (hidden), dan wordt het zichtbaar. Als het element zichtbaar is (visible), dan wordt het onzichtbaar.

Standaard verbergen van inhoud

Het script doet nu wat het doen moet!

Een minpuntje kan zijn dat de layer standaard al zichtbaar is. Misschien wil je wel dat de layer standaard niet zichtbaar is en pas tevoorschijn komt na het klikken op de link.

Ook dat kan, maar dan hebben we wel een extra script nodig dat ervoor zorgt dat de layer in eerste instantie niet zichtbaar is.

De code hiervoor ziet er als volgt uit:

function beginfase()
{
  document.getElementById('layer1').style.visibility = 'hidden';
}


Deze functie roepen we aan bij het laden van het document:

<body onload="beginfase()">


Zo, dat was het! Wellicht kun je zelf wel toepassingen bedenken waarvoor je dit script kunt gebruiken.

Ruimte verborgen inhoud verwijderen

Zoals je ziet, wordt de ruimte voor de eerste layer standaard al vrijgehouden. Wanneer je de layer dan uitklapt, wordt deze lege ruimte opgevuld.

Je kunt er echter ook voor zorgen dat deze ruimte niet leeg wordt gelaten op voorhand. Bij het uitklappen van de layer verplaatst de andere inhoud zich dan gewoon naar onderen. Hiervoor moeten we een klein beetje sleutelen aan de bestaande code.
<script type="text/javascript">
<!--
function showOrHide(value)
{
  if (document.getElementById(value).style.display == 'none')
  {
    document.getElementById(value).style.display = 'block';
  }
  else
  {
    document.getElementById(value).style.display = 'none';
  }
}

function beginfase()
{
  document.getElementById('layer1').style.display = 'none';
}
//-->
</script>

 
1 + 1 =
 

Verdien meer met je website

NIEUW OP HET FORUM

Meer...