Expandable

Examples


<div class="expandable">
  <a href="#" class="expandable__trigger">Click me</a>
  <div class="expandable__content">
    <p>Peekaboo</p>
  </div>
</div>

    

<div class="expandable">
  <a href="#" class="expandable__trigger expandable__trigger--right">Click me</a>
  <div class="expandable__content">
    <p>Peekaboo</p>
  </div>
</div>

    

States

state name effect
.is-expanded Expands the expandable__content area
.is-active Sets the blue borders on top of the active expandable area