Accordion (inhoud tonen/ verbergen)

Het implementeren van een accordion op je website is een effectieve manier om inhoud georganiseerd en compact weer te geven. Een accordion is een interactief element dat secties met inhoud samenvouwt en uitvouwt wanneer bezoekers erop klikken. Dit bespaart ruimte op de pagina en maakt het gemakkelijk voor gebruikers om specifieke informatie te vinden.

Wanneer een accordion gebruiken?

Accordions zijn vooral handig voor het organiseren van lange lijsten, FAQ-secties of het presenteren van informatie in stapsgewijze formaten. Door gebruik te maken van een accordion, verbeter je de gebruikerservaring door bezoekers de controle te geven over welke informatie ze willen bekijken, waardoor je website overzichtelijk en toegankelijk blijft.

Hoe ziet de accordion er uit?

Hieronder staat een voorbeeld van een accordion.

Voorbeeld Accordion

Je kunt teksten, lijsten, kopteksten en andere elementen plaatsen in een accordion.

Voorbeeld koptekst

met daaronder een paragraaf

  • en een samenstelling van onderdelen
  • in een lijst
  • met meerdere onderdelen

Je kunt ook lange teksten plaatsen. Hieronder een voorbeeld met Lorum ipsum tekst (dummy tekst)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam odio justo, dictum vel semper eget, ullamcorper nec ligula. Proin vel neque at leo malesuada eleifend. Donec condimentum, leo id egestas tincidunt, metus metus cursus ante, quis ullamcorper diam odio quis nibh. Nunc vitae mauris mollis, auctor sapien eu, ultricies diam. Phasellus nisi sapien, mattis id ligula eu, viverra porttitor odio. Suspendisse maximus leo quis lobortis volutpat. Quisque vel quam vitae elit varius aliquam id et elit. Cras accumsan felis at nisl gravida, et porttitor elit aliquet. Nulla urna dolor, tristique ut maximus porta, aliquam porta felis. Donec tristique auctor purus in commodo. Praesent vitae neque nisl.

Etiam erat ex, rutrum quis vestibulum ac, vulputate porta tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur sit amet mi vestibulum, consequat leo vitae, suscipit dui. Cras venenatis elit eros, a fringilla dolor lacinia at. Morbi sem mauris, porta ut porttitor eget, placerat eu turpis. Curabitur ac orci ultricies, tristique enim sit amet, placerat eros. Nulla dignissim nunc nulla, ac viverra felis vestibulum suscipit. Duis id condimentum nisl, eget aliquam eros. Suspendisse efficitur commodo sem tincidunt porta. Mauris blandit urna eu suscipit consectetur. Nulla convallis mi libero, at cursus purus hendrerit a. Etiam ac neque quis orci imperdiet mollis. Vivamus tempus auctor pellentesque. Vestibulum consectetur rhoncus lorem. Phasellus a nisl ut sem maximus dictum faucibus at risus. In a scelerisque est.

Suspendisse eget mollis est, ac pellentesque felis. Mauris a dapibus felis. Sed scelerisque nisi sagittis urna sagittis scelerisque. Nullam faucibus enim ligula, et lobortis dolor viverra consectetur. Cras dignissim elit eget leo tempor, id suscipit erat efficitur. Sed commodo lacus sit amet libero luctus blandit. Phasellus dignissim, velit ut pellentesque commodo, lorem nisl fringilla nisl, id aliquam nibh turpis sit amet quam. Proin vestibulum et ante sed ultricies. Sed vestibulum vel mi non suscipit. Proin ut ornare nunc. Fusce venenatis erat eu malesuada egestas. Aliquam consectetur risus et massa accumsan vulputate. Integer convallis mi ut massa molestie, sed egestas ante facilisis.

Sed dapibus venenatis blandit. Vivamus faucibus nisi est. Mauris eget erat lacinia, pulvinar lacus eget, interdum erat. Nulla sagittis maximus consequat. Donec ac tempus felis, ac tempus urna. Duis sed consequat augue, in dapibus leo. Nam volutpat, nunc eu consequat ullamcorper, tortor quam tincidunt risus, sed condimentum magna nulla vitae purus. Cras lacinia viverra nunc viverra congue. Integer sit amet diam dignissim, bibendum neque ac, sollicitudin lacus. Cras quam elit, mollis id sodales sed, volutpat vel sem. Fusce volutpat maximus enim, in tempor arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Mauris consectetur pellentesque ullamcorper. Mauris non maximus leo. Pellentesque venenatis sodales erat, sit amet egestas mi pretium maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu elit ultrices, aliquam dui at, feugiat dui. Quisque porttitor nisl non fermentum semper. Nam vulputate pellentesque velit, vitae vestibulum justo convallis eu. Sed aliquet vitae ligula at interdum. Praesent pulvinar est nec diam sollicitudin euismod. Proin pretium mattis sapien a feugiat. Nulla ultricies lobortis massa ac convallis.