Javascript tip: inklappende en uitklappende inhoud
Wie een beetje interesse heeft in webdesign weet dat het gerbuik van javascript op zijn pagina bijna niet te vermijden is. De huidige webomgeving verwent de bezoeker met onmiddelijke reacties op een simpele klik. Nochtans is dit niet vanzelfsprekend, want elke verandering van paginainhoud zorgt voor een serverrequest, tenzij je javascript gebruikt. Lees hieronder hoe je met javascript delen van de pagina voor de bezoeker kan tevoorschijn toveren.
1. In/uitklappende DIV tags met innerHTML.
Je kent het wel: met een simpele klik moet er iets weergegeven worden, met een simpele klik moet diezelfde informatie weer verdwijnen. Denk maar aan een FAQ pagina waarbij het antwoord op de vraag naar believe kan tevoorschijn of weggetoverd worden.
Een oplossing die voor de hand ligt is de innerHTML functie van javascript. Deze functie veranderd de inhoud van een tag in de inhoud die jij verkiest. bv:
<a href="javascript:;" onClick='toonantwoord(toon)'>Dit is de vraag</a> <div id="toon"></div>
Als je in het DIV tag het antwoord wil doen verschijnen, schrijf je deze functie tussen de script tags in de head sectie:
function toonantwoord(id){
var inhoud = getElementById(id);
inhoud.innerHTML='Dit is het antwoord';
}
Je wil natuurlijk een functie waardoor het antwoord weer verdwijnt. We veranderen de functie door beide mogelijkheden in een if statement te zetten:
function toonantwoord(id){
var inhoud = getElementById(id);
if(inhoud.innerHTML==<i>){</i>
inhoud.innerHTML='Dit is het antwoord';
} else {
inhoud.innerHTML=<i>;</i>
}
Deze methode werkt heel eenvoudig, maar het genereren van nieuwe HTML code kan toch het systeem vertragen als de HTML complex wordt. Daarenboven moet je de hmtl in de javascript functie schrijven, waarbij je de aanhalingstekens moet beschermen met een \ .Het werkt, maar persoonlijk vind ik dit geen topper.
2. In/uitklappende DIV tags met javascript en CSS.
Mijn favoriete methode is namelijk de HTML code reeds te schrijven, maar ze enkel zichtbaar te maken voor de gebruiker als hij erom vraagt. Dit kan met het CSS stijl attribuut: style="display:none"
In het geval van hierboven:
<a href="javascript:;" onClick='toonantwoord(toon)'>Dit is de vraag</a> <div id="toon" style="display:none">Antwoord</div>
De pagina heeft de HTML reeds geladen, maar dat zag de gebruiker niet. Hij zal zich dus ook niet storen aan laadtijd wanneer de HTML zichtbaar gemaakt wordt dankzij ons javascript functie:
function toonantwoord(id){
var inhoud = getElementById(id);
inhoud.style.display='block';
}
Wanneer de gebruiker klikt op de vraag, zal de HTML getoond worden zonder laadtijd. Voor simpele HTML code is dit hetzelfde effect als innerHTML, maar voor HTML code met bv. figuren en tabellen in, is deze methode duidelijk sneller.
We willen nu ook het antwoord terug verbergen, dus wederom een if statement toevoegen aan onze functie:
function toonantwoord(id){
var inhoud = getElementById(id);
if(inhoud.style.display=='none';){
inhoud.style.display='block';
} else {
inhoud.style.display='none';
}
}
3. Inklappende DIV combineren met server side (php, asp,...)acties
Wanneer je een dynamische pagina schrijft, kan je de inklappende DIV gebruiken om de indruk te wekken dat de gebruiker iets verwijderd heeft zonder dat zijn actie eerst moet verwerkt worden door de server alvorens een nieuwe pagina te genereren. Ikzelf gebruik dit bij een berichtjes systeem. Wanneer de gebruiker op het kruisje klikt om een berichtje te verwijderen, activeert hij een AJAX functie die een server side pagina opent om het berichtje te verwijderen uit de database. In plaats van een nieuwe lijst berichtjes te genereren, hetgeen een nieuwe pagina laden betekend, laat ik het berichtje inklappen, maar zonder de functie om het terug open te klappen. De gebruiker denkt dat zijn bericht verdwenen is, maar enkele de HTML is niet meer zichtbaar.
4. Lees ook andere Javascript tips:
Javascript tip: Toggle images met Javascript