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.
Collapsing content can be good for pages with lots of copy. However, closed sections cannot be searched with the default browser search function. Ironically, it is long-form content that invites the user to search. For this reason, putting important content into collapsing sections is not advised.
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.