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!

You have no rights to post comments