Hier ziet je een aantal paragraaf-titels. Als je er op klikt verschijnt de bijbehorende tekst. Deze
tekst verdwijnt dan.
De opmaak en het gedrag in de praktijk lijkt wel wat op een accordeon. De hier besproken techniek heeft
daarom dezelfde naam gekregen: accordeon.
Het is vooral geschikt als je een grotere hoeveelheid (in brokken verdeelde) informatie wilt tonen op
een betrekkelijk klein deel van het scherm.
Deze benadering is ook geschikt voor het maken van een menu met veel items in de sub-menu's.
De code van het voorbeeld kun je downloaden om zelf te gebruiken.
Advies: Als je het hele artikel in één keer wilt lezen kun je het beste alle tabs
openenen. klik daarvoor op de knop Toon Alles, onder de accordeon.
Bespreking van de code
Het werkt als volgt:
De titel van een 'tab' en de bijbehorende tekst staan samen in één blok code, dat reageert als
er op wordt geklikt: <div onclick="ToonParagraaf('x')">...</div>.
De function ToonParagraaf('x') sluit eerst alle tabs en opent daarna de gewenste tab. De parameter x
is een volgnummer: '1', '2', '3', enz.
Binnen de <div>-tag staat de Tab-titel, opgemaakt met een CSS-class. Deze altijd zichtbaar.
Daarbij is er een tweede <div>-tag, waar de content in staat. Deze tag heeft zowel een
CSS-class als een CSS-id. De class regelt de opmaak, via de id wordt het verdwijnen en verschijnen
van de content geregeld.
Bij het openen van de pagina is alleen de content van de eerste tab zichtbaar. De rest is verborgen. Dat
wordt geregeld met het style-attributen display="none" en display="block"
Als er op een titel wordt geklikt, maakt ToonParagraaf() de betreffende content zichtbaar.
Opmerking:
De id's van elke tab moeten uniek zijn. De volgorde-nummering moet doorlopend zijn, er mogen geen gaten in zitten.
Hier is gebruik gemaakt van id="ParagraafContent_1", "ParagraafContent_2",
"ParagraafContent_3", enz.
Opmerking:
Als je de informatie wilt printen, wordt alleen de zichtbare informatie afgedrukt. De verborgen informatie wordt
niet geprint. Om dat op te vangen is een function aan de code toegevoegd: ToonAlles(). Deze function opent
alle tabs, zodat het hele document naar de printer kan worden gestuurd.
Met de function ToonNiets() worden alle tabs gesloten.
Voorbeeld: Gebruik de knoppen Toon Alles en Verberg Alles. Ze staan onderaan de accordeon.
N.B.: De functions ToonAlles() en ToonNiets() veranderen de status van de accordeon.
Ze kunnen daarom niet vanuit de accordeon zelf worden aangeroepen. De code voor de twee knoppen moet dus buiten
de code staan waarmee de accordeon wordt gebouwd.
Inbouwen in je eigen site
De code staat gedeeltelijk in de HEAD (Een style-block voor de opmaak en het JavaScript voor de besturing)
en gedeeltelijk in de BODY (De code voor de accordeon zelf).
In het style-block staan een id en een class waarvan de namen voor zich spreken: #ParagraafKop
en .ParagraafContent. De inhoud kun je aanpassen naar je eigen wensen. De namen moeten ongewijzigd blijven.
Het JavaScript bevat drie functions voor het besturen van de accordeon, zie onder de tab "Bespreking van
de code". Deze hoeven niet te worden aangepast.
Er is ook een variabele AantalTitels. Hier geef je het aantal Paragraaf-koppen op dat je gebruikt. Hier
is dat 6. Verder laat je dit ongewijzigd.
De code voor de accordeon zelf, in de BODY, bestaat voor elke paragraaf uit twee <div>-tags,
zie bij "Bespreking van de code".
De volgnummers voor de aanroep van ToonParagraaf() (in de id's van de eerste <div>-tag) en
de tweede <div>-tag) moeten aan elkaar gelijk zijn. De nummering moet doorlopend zijn. Het eerste
volgnummer is 1.
Elke tweee <div>-tag heeft het attribuut style="display:none". Dat is voor alle
paragrafen, behalve voor de eerste, daar staat: style="display:block".
Hierdoor is bij het laden van de pagina de eerste paragraaf zichtbaar, de rest is verborgen.
<script>
function ToonParagraaf(seqno) { // Sluit alle tabs, open nr seqno
for (i=1; i<=6; i++) document.getElementById('Paragraaf_'+i).style.display = "none";
document.getElementById('Paragraaf_'+seqno).style.display = "block";
}
function ToonAlles() { // Open alle tabs
for (i=1; i<=6; i++) document.getElementById('Paragraaf_'+i).style.display = "block";
}
function ToonNiets() { // Sluit alle tabs
for (i=1; i<=6; i++) document.getElementById('Paragraaf_'+i).style.display = "none";
}
</script>
Aan de toepassing van deze techniek zoals op deze bladzijde kleeft een groot nadeel: De lezer verliest
gauw het overzicht omdat je steeds een andere tab moet openen (tenzij je alle tabs tegelijkertijd openzet).
Gebruik het daarom alleen op een deel van de pagina, met een korte opsomming als titel, bijvoorbeeld:
Hond, Kat, Schildpad, Cavia, Goudvis. Per tab geef je dan de specifieke kenmerken van die dieren weer.
