Accordion

Een Accordion is een lijst met open te klappen items. Elk item klapt open zodra het item wordt aangeklikt. Een voorbeeld van het gebruik van een Accordion is bijvoorbeeld een Q&A (Question & Answer - Veel gestelde vragen en de daarbij behorende antwoorden) overzicht.

Gebruik

Om een Accordion te maken voeg dan de uk-accordion class en het data-uk-accordion attribute toe. Voeg de uk-accordion-content class toe aan elk content deel!. Voeg uiteindelijk de uk-accordion-title class aan elke element toe, zoals bij de koptekst en boven de contentinhoud. Bekijk onderstaand voorbeeld om te zien hoe dit moet. Kop 2 wordt als je met je muis er op komt groen, dit komt omdat aldaar het attribute uk-button-success ook is toegevoegd, dit om te laten zien dat je e.e.a. kan combineren.

Voorbeeld 1 (1 item tegelijk geopend)

Kop 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Kop 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Kop 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Kop 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Kop 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

 

<div class="uk-accordion data-uk-accordion">
 <h3 class="uk-accordion-title">Kop 1</h3>
  <div class="uk-accordion-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
   </div>
 <h3 class="uk-accordion-title uk-button-success">Kop 2</h3>
  <div class="uk-accordion-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
  </div>
 <h3 class="uk-accordion-title">Kop 3</h3>
  <div class="uk-accordion-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
   </div>
 <h3 class="uk-accordion-title">Kop 4</h3>
  <div class="uk-accordion-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
  </div>
 <h3 class="uk-accordion-title">Kop 5</h3>
  <div class="uk-accordion-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
  </div>
</div> 



Voorbeeld 2 (meerdere items tegelijk geopend)

Wil je dat de items open blijven staan voeg dan het javascript attribute {collapse: false} toe.

Kopje 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Kopje 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Kopje 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Kopje 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Kopje 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

 

<div class="uk-accordion data-uk-accordion="{collapse: false}">
 <h3 class="uk-accordion-title">Kopje 1</h3>
  <div class="uk-accordion-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
   </div>
 <h3 class="uk-accordion-title uk-button-success">Kopje 2</h3>
  <div class="uk-accordion-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
  </div>
 <h3 class="uk-accordion-title">Kopje 3</h3>
  <div class="uk-accordion-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
   </div>
 <h3 class="uk-accordion-title">Kopje 4</h3>
  <div class="uk-accordion-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
  </div>
 <h3 class="uk-accordion-title">Kopje 5</h3>
  <div class="uk-accordion-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
  </div>
</div> 

 

 JavaScript opties

De te gebruiken javascript attributen zijn:

Opties waarde (value) Standaard instelling (default) Omschrijving
showfirst boolean true Laat bij openen webpage het 1e item zien
collapse boolean true Laat geopend item open staan
animate boolean true Animate toggle
easing string swing Animation function
duration integer 300 Animation duration
toggle string .uk-accordion-title Css selector for toggles
containers string .uk-accordion-content Css selector for content containers
clsactive string uk-active Class to add when an item is active