Find me on GitHub
Breadcrumbs Button Buttongroup Caption Checkbox Datepicker Definition-list Expandable Footer Icons Infochip Inputfield List Loading Media Navbar Pagination Progressbar Progresscircle Radiobutton Select Sidebar Slider Subnav Switch Table Table-expandable Tabs Tag Textarea Tile

Expandable

In groundhog since v0.1.1

Examples


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

    

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

    

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

    

<div class="expandable expandable--separated">
  <a href="#noop" class="expandable__trigger">Lorem ipsum</a>
  <div class="expandable__content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
  </div>
</div>
<div class="expandable expandable--separated">
  <a href="#noop" class="expandable__trigger">Nulla consequat massa quis enim</a>
  <div class="expandable__content">
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
  </div>
</div>
<div class="expandable expandable--separated">
  <a href="#noop" class="expandable__trigger">Aliquam lorem ante</a>
  <div class="expandable__content">
    <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
  </div>
</div>
<div class="expandable expandable--separated">
  <a href="#noop" class="expandable__trigger">Nam quam nunc</a>
  <div class="expandable__content">
    <p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.</p>
  </div>
</div>

Introduction

The expandable component is used for sections of a page that are hidden by default and can be expanded by the user.

Including an expandable section

  1. First add a link with the expandable__trigger class and include the expandable headline.

    <a href="#" class="expandable__trigger">Click me</a>

  2. Than create an element that contains the expandable content and add the expandable__content class.

    <div class="expandable__content">...</div>

  3. Finally put header and content into a section and add the expandable class.

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

Expandable versions

If you want to separate the expandable section from the rest of the content when it's active, add the expandable--separated class to the expandable container.

  <div class="expandable expandable--separated">
    <a href="#" class="expandable__trigger">Click me</a>
    <div class="expandable__content">
      <p>Expandable content</p>
    </div>
  </div>

Available classes for expandable

class name effect
.expandable Base class for the expandable element
.expandable--separated Adds border-top and -bottom to expanded section
.expandable--nav Use this together with the navbar component to enhance the mobile behavior of the navigation. For examples check out Groundhog's navbar.
.expandable--subnav Use this together with the subnav component to enhance the mobile behavior of the navigation. For examples check out Groundhog's subnav.

States

state name effect
.is-active Expands the expandable__content area and (optionally) sets the borders on top of the active expandable area (only if expandable--separated is set).