Accordion

Accordion item 1

Teaser for accordion item 1

Item content

Accordion item 2

Teaser for accordion item 2

Item content

Accordion item 3

Teaser for accordion item 3

Item content

Accordion item 4

Teaser for accordion item 4

Item content

Accordion item 5

Teaser for accordion item 5

Item content

Voorbeeld HTML

<div class="rvo-accordion">
  <details class="rvo-accordion__item">
    <summary class="rvo-accordion__item-summary">
      <h3 class="rvo-accordion__item-title utrecht-heading-3 rvo-heading--no-margins rvo-heading--mixed">
        <span
          class="utrecht-icon rvo-icon rvo-icon-delta-omlaag rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--closed"
          role="img"
          aria-label="Delta omlaag"
        ></span>
        <span
          class="utrecht-icon rvo-icon rvo-icon-delta-omhoog rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--open"
          role="img"
          aria-label="Delta omhoog"
        ></span>
        Accordion item 1
      </h3>
      <span class="rvo-accordion-teaser">
        <div>Teaser for accordion item 1</div>
      </span>
    </summary>
    <div class="rvo-accordion__content">
      <div>Item content</div>
    </div>
  </details>
  <details class="rvo-accordion__item">
    <summary class="rvo-accordion__item-summary">
      <h3 class="rvo-accordion__item-title utrecht-heading-3 rvo-heading--no-margins rvo-heading--mixed">
        <span
          class="utrecht-icon rvo-icon rvo-icon-delta-omlaag rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--closed"
          role="img"
          aria-label="Delta omlaag"
        ></span>
        <span
          class="utrecht-icon rvo-icon rvo-icon-delta-omhoog rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--open"
          role="img"
          aria-label="Delta omhoog"
        ></span>
        Accordion item 2
      </h3>
      <span class="rvo-accordion-teaser">
        <div>Teaser for accordion item 2</div>
      </span>
    </summary>
    <div class="rvo-accordion__content">
      <div>Item content</div>
    </div>
  </details>
  <details class="rvo-accordion__item">
    <summary class="rvo-accordion__item-summary">
      <h3 class="rvo-accordion__item-title utrecht-heading-3 rvo-heading--no-margins rvo-heading--mixed">
        <span
          class="utrecht-icon rvo-icon rvo-icon-delta-omlaag rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--closed"
          role="img"
          aria-label="Delta omlaag"
        ></span>
        <span
          class="utrecht-icon rvo-icon rvo-icon-delta-omhoog rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--open"
          role="img"
          aria-label="Delta omhoog"
        ></span>
        Accordion item 3
      </h3>
      <span class="rvo-accordion-teaser">
        <div>Teaser for accordion item 3</div>
      </span>
    </summary>
    <div class="rvo-accordion__content">
      <div>Item content</div>
    </div>
  </details>
  <details class="rvo-accordion__item">
    <summary class="rvo-accordion__item-summary">
      <h3 class="rvo-accordion__item-title utrecht-heading-3 rvo-heading--no-margins rvo-heading--mixed">
        <span
          class="utrecht-icon rvo-icon rvo-icon-delta-omlaag rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--closed"
          role="img"
          aria-label="Delta omlaag"
        ></span>
        <span
          class="utrecht-icon rvo-icon rvo-icon-delta-omhoog rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--open"
          role="img"
          aria-label="Delta omhoog"
        ></span>
        Accordion item 4
      </h3>
      <span class="rvo-accordion-teaser">
        <div>Teaser for accordion item 4</div>
      </span>
    </summary>
    <div class="rvo-accordion__content">
      <div>Item content</div>
    </div>
  </details>
  <details class="rvo-accordion__item">
    <summary class="rvo-accordion__item-summary">
      <h3 class="rvo-accordion__item-title utrecht-heading-3 rvo-heading--no-margins rvo-heading--mixed">
        <span
          class="utrecht-icon rvo-icon rvo-icon-delta-omlaag rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--closed"
          role="img"
          aria-label="Delta omlaag"
        ></span>
        <span
          class="utrecht-icon rvo-icon rvo-icon-delta-omhoog rvo-icon--md rvo-icon--hemelblauw rvo-accordion__item-icon--open"
          role="img"
          aria-label="Delta omhoog"
        ></span>
        Accordion item 5
      </h3>
      <span class="rvo-accordion-teaser">
        <div>Teaser for accordion item 5</div>
      </span>
    </summary>
    <div class="rvo-accordion__content">
      <div>Item content</div>
    </div>
  </details>
</div>

Open in nieuwe tab

Documentation for accordion