Habitat Style Guide

This is the Form Expandable component. It allows a checkbox or radio element to expand a child container. This is a pure CSS solution with no JS dependency.

Usage:

• Add .form-expandable__src to the radio or checkbox.
• On the same level add .form-expandable__container to the container element of the element you'd like to toggle.
• Finally add .form-expandable__target to the element you would like to toggle.
• The .form-expandable__content class adds additional padding for nested elements.

Example:

<input class="form-expandable__src" type="radio">
  ...
<div class="form-expandable__container">
    ...
  <div class="form-expandable__target">
    <div class="form-expandable__content">
      Content that will be expanded.
    </div>
  </div>
</div>