ALF Collapsibles

The markup for collapsibles is:

<div class="collapsible">
  <div class="collapsible-trigger">...</div>
  <div class="collapsible-content">
    ...
  </div>
</div>

Be careful if you apply styles directly to .collapsible-content. Some things are ok, but avoid vertical margins/paddings/borders.

Standard collapsible

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

Styled collapsibles

Add one of the color identifiers to create styled collapsibles:

.main

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.alt

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.ok

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.error

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Collapsible starts open

Use the attribute data-alf-collapsible-starts-open='true'.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula nunc vehicula mauris consequat condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet risus ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a placerat nisl.

Collapsible with trigger at the bottom, and alternating text

To place the trigger at the bottom nothing special is necessary, just change the order of the divs.

To use alternating text, the container needs the attributes data-alf-collapsible-text-closed="..." i data-alf-collapsible-text-opened="...". No need to add the text to .collapsible-trigger (it's done automatically), but the div has to be there.

Linked collapsibles

If collapsibles are linked, only one will be opened at a time. Do this by adding the attribute data-alf-collapsible-link="linkId".

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

Dolor sit amet

Consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

Nested collapsibles

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

Nested collapsible

Double nested