Accordions maken met HTML en CSS

Accordions, wat zijn het en hoe maak je ze?

Uiteraard wordt nu niet het muziek instrument bedoeld, maar een accordion die je op je website kunt plaatsen.

Wat is een accordion

Met een accordion kun je een uitklapbaar blok maken op je website. Je kunt dus bijvoorbeeld hoofdstukken maken, waarbij je alleen de hoofdstuk titels toont. Wanneer iemand op zo'n titel klikt, dan wordt het daadwerkelijke hoofdstuk getoond.

Bij lange website teksten kan zo'n accordion er voor zorgen dat alles wat gemakkelijker leesbaar en overzichtelijker wordt.

Een veel gebruikte toepassing is een FAQ pagina. Je ziet dan dat de veel gestelde vragen in beeld staan, en als je dan op zo'n vraag klikt dan klapt het antwoord uit.

Hoe maak je accordions?

Vaak zie je dat er gebruik wordt gemaakt van javascript om ze te maken. Het is echter ook mogelijk om accordions te maken met alleen maar HTML en CSS.

Hoe je dit doet, zie je in de onderstaande video:

In de video zag je de benodigde html en css code voorbij komen, ik kan me voorstellen dat het lastig is om dit allemaal over te schrijven.

Daarom heb ik deze demo gemaakt, waarin je dus de exacte code kunt vinden, zodat je zelf met accordions kunt experimenteren.

Accordions in Joomla

Uiteraard kun je ook in Joomla accordions maken. Er zijn daarvoor wel extensies te vinden.

Met de bovenstaande HTML en CSS code kun je ook in Joomla een accordion maken. Hoe je dat doet, ontdek je in deze video:

Accordions in Wordpress

De HTML en CSS code gaat niet altijd goed in Wordpress. Gelukkig zijn er voor Wordpress uitstekende plugins te vinden om een mooie accordion te maken.

In de onderstaande video zie je zo'n plugin in actie:

Heel veel succes met het maken van accordions op je website!

Reacties  

#6 Erik Steinkamp 22-10-2017 20:40
Beste Mindert,

Mooie toepassing en duidelijk uitgelegd.
Bedankt maar weer!
Citeer
#5 Udo Sprang 19-10-2017 11:22
Bedankt voor deze handige code.
Er was voor mij wel een aanpassing nodig.
De CSS-regels voor 'input' gelden in het voorbeeld voor alle input op de website, en dat is niet de bedoeling.
Opgelost door in de CSS 'input' te vervangen door '.chapter input'. En dan gaat het goed.
Citeer
#4 Hans Schreuder 18-10-2017 16:55
Leuke en leerzame workshop, zeer duidelijke uitleg
Citeer
#3 Tiger Master 18-10-2017 15:10
Zoals een FAQ mobule is dit ideaal en waarschijnlijk sneller, buiten joomla als je eerst wil experimenteren dan is HTML + CSS ideaal en zal het ook goed doen alleen je moet rekening houden met verschillende browsers (opera, chroom, explore, etc. (of dit werkt met comodo dragon en ice dragon (chroom/firefox based) zou ik uit moeten testen maar vorm geven is ook een uitdaging. Ik ga hier zeker mee experimenteren ziet er makkelijk uit :)
Citeer
#2 Ton van Steenoven 18-10-2017 15:09
Beste Mindert,

Mooie toepassing en helder uiteen gezet.

Ton
Citeer
#1 Ruud in t Veld 18-10-2017 14:25
Scheelt weer de installatie van een extra extensie. Bedankt voor de heldere uitleg.
Citeer

Plaats reactie

Beveiligingscode
Vernieuwen