Accordion

When a page or a table contains a lot of information, one may use expandos to consolidate and hide this content, thereby lightening the page layout. The specific behavior required may depend on the content or context of the specific page. Please be sure to consult with a UX designer to determine which type should be used.

The way it works is simple: basically, when the content is hidden, it is represented only by its title and a “+”. When you click on the item, it changes the “+” to “x”, and the content appears under the title.

If the desired behavior is to have only 1 item expanded at a time, we need to identify this expando as an accordion. In this case, when the user opens a second item, the first one will close.

Classes:

style: .expandable, .expandable-wrapper, .title-expand, .expandable-content

function: .js-accordion, .js-expand

Accordions can also have one item open at the start of the page; as with regular expandos, the behavior is not changed; the item will close if it is clicked, or if another item is opened.