Accordion

Met een accordeon kun je content verbergen en zichtbaar maken. Handig om bijvoorbeeld bij weetjes te gebruiken.

<div class="accordion">
  <div class="dropdown">
    <button class="button">Label 1</button>
    <div class="dropdown-menu">
      Inhoud
    </div>
  </div>
  <div class="dropdown">
    <button class="button">Label 2</button>
    <div class="dropdown-menu">
      Inhoud
    </div>
   </div>
</div>

Kleurpalet

Klik op een kleur om het accordion te wijzigen en de code zichtbaar te maken!

<div class="button color-white color-white-hover"></div>
<div class="dropdown-menu color-light-white"></div>

<div class="button color-black color-black-hover"></div>
<div class="dropdown-menu color-light-black"></div>

<div class="button color-gray color-gray-hover"></div>
<div class="dropdown-menu color-light-gray"></div>

<div class="button color-blue color-blue-hover"></div>
<div class="dropdown-menu color-light-blue"></div>

<div class="button color-red color-red-hover"></div>
<div class="dropdown-menu color-light-red"></div>

<div class="button color-orange color-orange-hover"></div>
<div class="dropdown-menu color-light-orange"></div>

<div class="button color-green color-green-hover"></div>
<div class="dropdown-menu color-light-green"></div>

<div class="button color-lime color-lime-hover"></div>
<div class="dropdown-menu color-light-lime"></div>

<div class="button color-yellow color-yellow-hover"></div>
<div class="dropdown-menu color-light-yellow"></div>

<div class="button color-brown color-brown-hover"></div>
<div class="dropdown-menu color-light-brown"></div>

<div class="button color-purple color-purple-hover"></div>
<div class="dropdown-menu color-light-purple"></div>

<div class="button color-pink color-pink-hover"></div>
<div class="dropdown-menu color-light-pink"></div>