Build amazing sites with this great collection of components Buy Now

Collapsibles

Scannable primary content with a bonus

Collapsibles contain list of scannable primary content elements that can be further explored. Collapsibles hide content that is not immediately relevant to the user, but expand when clicked on.

The collapsible body — the element that is exposed after the click — can contain all sorts of (secondary) content, including links to even further explore the subject.

Collapsibles are very versatile elements that can be used for all types of situations, from navigation menus to product galleries.

Basic Collapsible

As mentioned above, the main purpose of a collapsible is to make a list of primary content easy to scan. Therefore they are created using a List Container Element with each of the list items having a header and body section.

The header section is clickable and will expose the body content. If you are looking at this in Site designer please click Preview on...to see this in action.

Active Collapsible

Collapsible with accent on open

The active header, the one for which the body content is exposed, has a background color. This makes it easier for the user to understand what is happening.

To change the accent (background) color you can set the 'In State' dropdown (find this here: Design Pane > Apply Styles section) to 'Opened Colap header'. Then the background color can be change on the Design Tab below.

  • Click me to see more content.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

  • Or you can click here.

    Just add the class .active to the list item (container) for which you want the content to display by default.

  • Or even here.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.

Nested Collapsible

A collapsible can be placed in the body of a collapsible item.

Expandable

The collapsible item can stay expanded (or be collapsed) independent of the other collapsible items.

Popout

A more pronounced way of showing the active content.

Toggle Accordion

The two buttons below toggle the height of two containers. The button that opens a containers gets a different background color.

To change the accent (background) color you can set the 'In State' dropdown (find this here: Design Pane > Apply Styles section) to 'Opened Colap header'. Then the background color can be change on the Design Tab below.

To view the hidden containers in Site Designer go to the Elements Pane and select a container with class .accordion-toggle. Then, on the Design pane, you can use the 'In State' dropdown again. This time use 'Open Accordion' to make them visible.

However, if you select an element inside of the containers the 'In State' section goes back to the default state for the newly selected element and accordions close. We are still studying how we can best address this in Site Designer.

For now a good working around is to temporarily change the max-height of the accordion containers. Then, when you are done editing, set the max-height back to 0px and test your edits in the browser.

TOGGLE  1
TOGGLE 2
Accordion 1
Text
ACCORDION 2
Text
There is some copyright thingy going here too. Feel free to do whatever you want with it after purchase [except resell without significant modification].