Collapsible content sections can be attached to any markup, in this example it's using markup from our Accordion component. The accordion component has two main states: collapsed and expanded. The chevron icon at the end of the accordion indicates which state the accordion is in. The chevron points down to indicate collapsed and up to indicate expanded.

Content cards can be collapsible as well, and you can control what toggler triggers it: all elements in card header, card title text, icon or a specific element. Be sure to place the toggler outside <div class="collapse"> container. In the following example card title is a regular anchor element with .text-body class that is highlighted with different color in active state.

Card group is a list of cards that are displayed seamlessly as 1 component. All cards in this layout require a wrapper container with .card-group-vertical class, which cleans up all spacings and borders in children cards. Height collapse in horizontal card group is also supported. Toggler options are similar to previous example.

You can also add a visual indication of current collapsible state. The icon is not hardcoded, which means you can use any icon from the default pack, just make sure you add .collapsible-indicator class to icon element. This class looks for .collapsed class in parent container and rotates the icon depending on the state. Icon indicator can aligned to the left and right.

All collapsible elements work independently, if ID's in toggle button and collapsible containers match. This allows you to have as many nested collapsible elements as we need. In this example we have a set of collapsible cards, each of them has another set of collapsible elements. All options from the examples above are fully supported.