Accordeon

Een accordeon biedt een verticale keuzelijst die je per onderdeel kunt openklappen om meer informatie te tonen en die je ook weer kunt dichtklappen.

Beschikbare voorbeelden:

Accordeon

Het keuze-element met pijltje naar boven en beneden.

Beschikbare voorbeelden:

Aandachtspunten:

  • Plaats de korte zichtbare tekst binnen een <button>.
  • Groepeer de verborgen content binnen een <div>.
  • Geef de <button> een uniek id en geef de <div> een aria-labelledby met als waarde het id van de <button>.
  • Plaats <script defer src="pad/naar/accordion.min.js"></script> in de <head> van het document om het accordeon interactief te maken.
    • Het defer attribuut zorgt ervoor dat het script in de achtergrond geladen wordt, zodat het tonen van de pagina niet geblokkeerd wordt.
    • Wanneer JavaScript niet beschikbaar is, worden alle onderdelen van het accordeon opengeklapt getoond.
  • Verschillende elementen kunnen gebruikt worden als accordeon-element. Zie onderstaande voorbeelden voor Openklapbare lijst, Openklapbare sectie en Openklapbaar blok.
  • Standaard is het eerste onderdeel opengeklapt. Dit kan aangepast worden middels het aria-expanded-attribuut van de <button>. Zie onderstaande voorbeelden voor Standaard dichtgeklapt en Standaard opengeklapt.

Openklapbare lijst

Visueel voorbeeld:

  • Titel van de content binnen het accordeon-element

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu. Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean quis libero gravida, fringilla odio venenatis, condimentum lorem.

    • Lorem ipsum
    • Dolor sit amet
    • Consectetur adepiscing elit.

  • Titel van de content binnen het accordeon-element

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu. Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean quis libero gravida, fringilla odio venenatis, condimentum lorem.

    • Lorem ipsum
    • Dolor sit amet
    • Consectetur adepiscing elit.

Html-voorbeeld:

              
<ul class="accordion">
  <li>
    <button aria-expanded="true" id="voorbeeld-header-1">Voorbeeld-onderwerp 1</button>
    <div aria-labelledby="voorbeeld-header-1">

       <!-- Voeg hier de content toe -->

    </div>
  </li>
  <li>
    <button aria-expanded="false" id="voorbeeld-header-2">Voorbeeld-onderwerp 2</button>
    <div aria-labelledby="voorbeeld-header-2">

       <!-- Voeg hier de content toe -->

    </div>
  </li>
</ul>

Openklapbare sectie

Visueel voorbeeld:

Titel van de content binnen het accordeon-element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu. Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean quis libero gravida, fringilla odio venenatis, condimentum lorem.

  • Lorem ipsum
  • Dolor sit amet
  • Consectetur adepiscing elit.

Titel van de content binnen het accordeon-element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu. Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean quis libero gravida, fringilla odio venenatis, condimentum lorem.

  • Lorem ipsum
  • Dolor sit amet
  • Consectetur adepiscing elit.

Html-voorbeeld:

              
<section class="accordion">
  <div>
    <button aria-expanded="true" id="voorbeeld-header-1">Voorbeeld-onderwerp 1</button>
    <div aria-labelledby="voorbeeld-header-1">

      <!-- Voeg hier de content toe -->

    </div>
  </div>

  <div>
    <button aria-expanded="false" id="voorbeeld-header-2">Voorbeeld-onderwerp 2</button>
    <div aria-labelledby="voorbeeld-header-2">

      <!-- Voeg hier de content toe -->

    </div>
  </div>
</section>

Openklapbaar blok

Visueel voorbeeld:

Titel van de content binnen het accordeon-element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu. Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean quis libero gravida, fringilla odio venenatis, condimentum lorem.

  • Lorem ipsum
  • Dolor sit amet
  • Consectetur adepiscing elit.

Titel van de content binnen het accordeon-element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu. Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean quis libero gravida, fringilla odio venenatis, condimentum lorem.

  • Lorem ipsum
  • Dolor sit amet
  • Consectetur adepiscing elit.

Html-voorbeeld:

              
<div class="accordion">
  <div>
    <button aria-expanded="true" id="voorbeeld-header-1">Voorbeeld-onderwerp 1</button>
    <div aria-labelledby="voorbeeld-header-1">

      <!-- Voeg hier de content toe -->

    </div>
  </div>
  <div>
    <button aria-expanded="false" id="voorbeeld-header-2">Voorbeeld-onderwerp 2</button>
    <div aria-labelledby="voorbeeld-header-2">

      <!-- Voeg hier de content toe -->

    </div>
  </div>
</div>

Standaard dichtgeklapt

Standaard is het eerste onderwerp opengeklapt. Door aria-expanded="false" toe te voegen aan de eerste <button>, zal deze dichtgeklapt beginnen.

Visueel voorbeeld:

  • Titel van de content binnen het accordeon-element

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu. Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean quis libero gravida, fringilla odio venenatis, condimentum lorem.

    • Lorem ipsum
    • Dolor sit amet
    • Consectetur adepiscing elit.

  • Titel van de content binnen het accordeon-element

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu. Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean quis libero gravida, fringilla odio venenatis, condimentum lorem.

    • Lorem ipsum
    • Dolor sit amet
    • Consectetur adepiscing elit.

Html-voorbeeld:

              
<ul class="accordion">
  <li>
    <button aria-expanded="false" id="voorbeeld-header-1">Voorbeeld-onderwerp 1</button>
    <div aria-labelledby="voorbeeld-header-1">

       <!-- Voeg hier de content toe -->

    </div>
  </li>
  <li>
    <button id="voorbeeld-header-2">Voorbeeld-onderwerp 2</button>
    <div aria-labelledby="voorbeeld-header-2">

       <!-- Voeg hier de content toe -->

    </div>
  </li>
</ul>

Standaard opengeklapt

Standaard is alleen het eerste onderwerp opengeklapt. Door aria-expanded="true" toe te voegen aan de <button>s, zullen die opengeklapt beginnen. Als in dat geval de eerste <button> geen aria-expanded-attribuut heeft, zal deze dichtgeklapt beginnen.

Visueel voorbeeld:

  • Titel van de content binnen het accordeon-element

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu. Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean quis libero gravida, fringilla odio venenatis, condimentum lorem.

    • Lorem ipsum
    • Dolor sit amet
    • Consectetur adepiscing elit.

  • Titel van de content binnen het accordeon-element

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu. Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean quis libero gravida, fringilla odio venenatis, condimentum lorem.

    • Lorem ipsum
    • Dolor sit amet
    • Consectetur adepiscing elit.

Html-voorbeeld:

              
<ul class="accordion">
  <li>
    <button id="voorbeeld-header-1">Voorbeeld-onderwerp 1</button>
    <div aria-labelledby="voorbeeld-header-1">

       <!-- Voeg hier de content toe -->

    </div>
  </li>
  <li>
    <button aria-expanded="true" id="voorbeeld-header-2">Voorbeeld-onderwerp 2</button>
    <div aria-labelledby="voorbeeld-header-2">

       <!-- Voeg hier de content toe -->

    </div>
  </li>
</ul>

Accordeon met plus- en min-icoon

Het keuze-element plus- en min-icoon.

Beschikbare voorbeelden:

Aandachtspunten:

  • Voeg de class icon-type-plus toe aan het omliggende element om gebruik te maken van de weergave met plus- en min-icoon. Zie onderstaande voorbeelden voor meer informatie.

Openklapbare lijst

Visueel voorbeeld:

  • Titel van de content binnen het accordeon-element

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu. Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean quis libero gravida, fringilla odio venenatis, condimentum lorem.

    • Lorem ipsum
    • Dolor sit amet
    • Consectetur adepiscing elit.

  • Titel van de content binnen het accordeon-element

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu. Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean quis libero gravida, fringilla odio venenatis, condimentum lorem.

    • Lorem ipsum
    • Dolor sit amet
    • Consectetur adepiscing elit.

Html-voorbeeld:

              
<ul class="accordion icon-type-plus">
  <li>
    <button aria-expanded="true" id="voorbeeld-header-1">Voorbeeld-onderwerp 1</button>
    <div aria-labelledby="voorbeeld-header-1">

       <!-- Voeg hier de content toe -->

    </div>
  </li>
  <li>
    <button aria-expanded="false" id="voorbeeld-header-2">Voorbeeld-onderwerp 2</button>
    <div aria-labelledby="voorbeeld-header-2">

       <!-- Voeg hier de content toe -->

    </div>
  </li>
</ul>

Openklapbare sectie

Visueel voorbeeld:

Titel van de content binnen het accordeon-element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu. Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean quis libero gravida, fringilla odio venenatis, condimentum lorem.

  • Lorem ipsum
  • Dolor sit amet
  • Consectetur adepiscing elit.

Titel van de content binnen het accordeon-element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu. Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean quis libero gravida, fringilla odio venenatis, condimentum lorem.

  • Lorem ipsum
  • Dolor sit amet
  • Consectetur adepiscing elit.

Html-voorbeeld:

              
<section class="accordion icon-type-plus">
  <div>
    <button aria-expanded="true" id="voorbeeld-header-1">Voorbeeld-onderwerp 1</button>
    <div aria-labelledby="voorbeeld-header-1">

      <!-- Voeg hier de content toe -->

    </div>
  </div>

  <div>
    <button aria-expanded="false" id="voorbeeld-header-2">Voorbeeld-onderwerp 2</button>
    <div aria-labelledby="voorbeeld-header-2">

      <!-- Voeg hier de content toe -->

    </div>
  </div>
</section>

Openklapbaar blok

Visueel voorbeeld:

Titel van de content binnen het accordeon-element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu. Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean quis libero gravida, fringilla odio venenatis, condimentum lorem.

  • Lorem ipsum
  • Dolor sit amet
  • Consectetur adepiscing elit.

Titel van de content binnen het accordeon-element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit egestas leo, eu semper erat congue at. Nulla pellentesque nunc nisl, at elementum ex aliquam ac. Fusce sed justo ullamcorper, eleifend nibh a, fringilla lorem. Aliquam erat volutpat. Aenean risus sem, tempor at rhoncus in, suscipit hendrerit arcu. Suspendisse ultricies semper sapien eget lobortis. Phasellus ut sodales sem. Aenean quis libero gravida, fringilla odio venenatis, condimentum lorem.

  • Lorem ipsum
  • Dolor sit amet
  • Consectetur adepiscing elit.

Html-voorbeeld:

              
<div class="accordion icon-type-plus">
  <div>
    <button aria-expanded="true" id="voorbeeld-header-1">Voorbeeld-onderwerp 1</button>
    <div aria-labelledby="voorbeeld-header-1">

      <!-- Voeg hier de content toe -->

    </div>
  </div>
  <div>
    <button aria-expanded="false" id="voorbeeld-header-2">Voorbeeld-onderwerp 2</button>
    <div aria-labelledby="voorbeeld-header-2">

      <!-- Voeg hier de content toe -->

    </div>
  </div>
</div>
Terug naar het hoofdmenu