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.

For regular expandos behavior, see Expandos Element.


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.


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

function: .js-accordion, .js-expand

Your privacy

BDC uses cookies to improve your experience on its website and for advertising purposes, to offer you products or services that are relevant to you. By clicking ῝I understand῎ or by continuing to browse this site, you consent to their use.

To find out more, consult our Policy on confidentiality.