Hoe maak ik een accordeon

De accordeon wordt ingezet als je veel tekst hebt en dit op een overzichtelijke manier wil tonen.

Gebruik accordeon

Wanneer gebruik je een accordeon?

Heb je een (lange) pagina die onoverzichtelijk dreigt te worden? Gebruik dan de mogelijkheid om de content per stukje in te laten klappen. Je bezoeker vindt zo sneller zijn weg.

Wanneer gebruik je geen accordeon?

Zet het contentblok accordeon alleen in als informatie in de accordeon niet-essentieel is. Redenen hiervoor zijn:

• Een accordeon verbergt informatie en er bestaat een kans dat niet alle gebruikers dit direct opmerken of begrijpen.
• Voor sommige gebruikers is het bij een accordeon moeilijker om content tot zich te nemen. Bij elke titel is nu interactie vereist doordat je de content in- en uitklapt.
• Het is voor een eindgebruiker niet meer mogelijk om door alle informatie op een pagina heen te zoeken met CTRL-F. Alleen door de content die op dat moment uitgeklapt is.

Alternatieven voor het contentblok accordeon

• Vereenvoudig of verminder de hoeveelheid informatie op een pagina.
• Gebruik veel tussenkopjes (H2 t/m H4)
• Zet informatie op verschillende pagina’s.
• Verwerk informatie in een infographic.

Voorbeeld accordeon

Voorbeeld met tekst

Dit is een accordeon met tekst

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem mauris, ornare vitae mauris et, feugiat eleifend nulla. Etiam tincidunt facilisis magna et sodales. In viverra nunc pharetra, rhoncus turpis sed, varius eros. Nulla vitae volutpat nunc. In sed augue efficitur, posuere mauris a, tempus neque. Sed mattis pellentesque mi sit amet mattis. Nulla ultrices mi arcu, id varius nisl dictum a. Fusce lobortis leo lacinia suscipit tincidunt. Nulla facilisi.

Voorbeeld met afbeelding

Dit is het bijschrift van de afbeelding van het Buitenhof in Den Haag

Let op, je kunt maar 1 afbeelding opnemen.

Een accordeon instellen

In een paginatype dat het contentblok accordeon ondersteunt kan onder het veld Contentblok het linkje accordeon worden aangeklikt:

Het contentblok accordeon opent als volgt:

Stap 1: overkoepelende titel

Het contentblok accordeon begin met een overkoepelende titel. Deze titel staat boven het lijstje met uitklapbare titels. Zorg dat de titel omschrijft wat er te vinden is in de accordeon.

In de onderstaande tabel staat uitgelegd wat je bij de velden van stap 1 moet invullen.

Overkoepelende titelTitel van het veldWat vul ik hier in?Hoe bedien ik dit veld?Eventuele toelichtingTitelKorte en duidelijke overkoepelende titel van alle itemsVoer de titel inZorg dat de titel omschrijft wat er te vinden is in de accordeon

Stap 2: items toevoegen

Je kunt in een accordeon meerdere uitklapbare titels toevoegen. In het CMS heten deze ook wel items. Elk item bestaat uit:

• een zichtbare titel die in of uit te klappen is.
• content die verschijnt bij in- en uitklappen van titel.

Lees in de onderstaande tabel staat wat je bij de velden van stap 2 moet invullen.

ItemsTitel van het veldWat vul ik hier in?Hoe bedien ik dit veld?Eventuele toelichtingTitelTitel van één itemVoer de titel in

Waar moet je verder op letten?

• Zorg dat de titel omschrijft wat er te vinden is in het item.

• Je kunt hier meerdere items onder elkaar toevoegen.

• De inhoud van elk item kan bestaan uit een tekstblok en/of een afbeeldingsblok.

Stap 3: Content aan items toevoegen

Je kunt aan een item de volgende contentblokken toevoegen:

• een tekstblok
• een afbeeldingsblok

Deze contentblokken zijn hetzelfde als standaard tekst- en afbeeldingsblokken.

In de onderstaande tabel staat uitgelegd wat je bij de velden van het tekstblok in stap 3 moet invullen. 

Contentblok tekstTitel van het veldWat vul ik hier in?Hoe bedien ik dit veld?Eventuele toelichtingTitelEen kop of tussenkopVoer de titel inBij het gebruik van koppen is het belangrijk om de volgorde aan te houden van H1, H2, H3, etc. Voor mensen die bijvoorbeeld blind zijn, is dit de houvast op structuur.TekstDe (alinea) tekstHet editorveld

In de onderstaande tabel staat uitgelegd wat je bij de velden van het afbeeldingsblok in stap 3 moet invullen.

Contentblok afbeeldingTitel van het veldWat vul ik hier in?Hoe bedien ik dit veld?Eventuele toelichtingAfbeeldingSelecteer de afbeeldingHet afbeeldinginvoegveldGrootte van de afbeeldingHalve of volle breedte

Kies een optie

Bijschrift (onderschrift)Korte omschrijving van de fotoNavigatie en eenvoudige veldenAlternatieve tekstTekst die wordt gebruikt door voorleesprogramma'sNavigatie en eenvoudige velden

Accordeon gebruiken?

Wil je weten wanneer je deze functionaliteit gebruikt? Lees de beschrijving van de accordeon.