Components

Collapsing Elements

Documentation, examples, and uses for collapsing elements on WOL

General Rules

Collapsing elements general take on two forms. The first is a simple 'show and hide' section that can be used to toggle the visibility of content by a button. The second is a series of collapsing sections bundled together that only ever allows a single section to be 'open' at a time. More commonly known as an accordion. 

Single collapse

Whilst the arrow and alternating copy are optional, the message should be clear to the user that content can be revealed and hidden upon interaction.  

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Accordion

One purpose of an accordion is to allow the user to maintain an overview of the available sections without having to scroll up and down, too much.

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.