Accordion

Anbefalt bruk: 

Bruk på sider hvor du har mange avsnitt, men hvor brukeroppgaven i hovedsak er å velge ett av avsnittene. 

Accordion kan brukes i både artikler og på forsider, men blir mindre i artikkel. 

Obs! Viktig informasjon som bør være umiddelbart synlig for brukere bør ikke legges inn i en accordion. 

Slik ser accordion ut:

Tips til bruk av accordion

• Avsnitt med mye tekst blir uoversiktlig - da virker accordion mot sin hensikt. Korte og poengterte avsnitt eller lister egner seg i accordion.
• For mange accordions på en side blir uoversiktlig - ca syv bør maks. 
• Ikke legg andre komponenter som f.eks. prosessveiviser inn i en accordion. 

Alternativer til accordion

Det går også an å rydde i store mengder tekst ved å bruke f.eks. automatisk innholdsfortegnelse. 

Vurder evt. om innholdet på siden heller bør deles opp i flere sider. 

Slik lager du et accordion

1. Sett koden rundt tittelen på avsnittet. Velg h2 eller h3 slik:
2. Kode:

   <h3 class="accordion">Tittel</h3>
    
   

3. Gjenta det på alle mellomtitlene du vil inkludere i trekkspill-visningen.

Avslutte accordion

• Accordion avsluttes alltid av ny h2/h3-overskrift som ikke er markert som class="accordion".
• Hvis du ønsker å avslutte accordion uten å legge inn ny overskrift, f.eks. hvis du ønsker å ha et bilde eller div-element som vises under accordion, gjør du dette ved å sette inn class="accordion-end" på tag-en der du ønsker at accordion skal avsluttes.
  • Eksempel 1 (vanlig avsnitt under accordion):
    <p class="accordion-end">*tekst i avsnittet*</p>
  • Eksempel 2 (video under accordion):

    <div class="accordion-end" class="vrtx-media-player"> </div>

• "Accordion-end" skal i utgangspunktet kunne plasseres på en hvilken som helst tag, men om det skulle vise seg vanskelig i noen tilfeller, går det også an å sette  "accordion-end" på en <p>-tag, som settes utenpå andre tag-er.
  • Eksempel (p-tag rundt <img>):
    <p class="accordion-end"><img alt="*alttekst*" height="X" src="*bilde-url" width="Y" /></p>