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> 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>
|
Ontwerp je site