Collapsible

The Collapsible component in custom data helps you present information in a clean, structured way. Ideal for accordion-style panels, it lets you reveal details only when needed—keeping your Fernand sidebar tidy and clutter-free.

How collapsible elements work

Collapsible elements consist of a header and a content section that can be toggled to show or hide information. They're particularly useful for organizing large amounts of data into manageable, digestible sections.

Basic structure

The basic structure of a collapsible element includes two main parts:

<div class="collapsible collapsed">
    <h3>Section title</h3>
    <div>Content goes here. Remove 'collapsed' class to show it by default.</div>
</div>

Controlling visibility

To control the visibility of your collapsible elements, use the collapsed class. When added, the element is collapsed (hidden) by default. The interactivity is then handled automatically for you a user toggle the element in and out.

Best practices

Follow these guidelines to maintain consistency across your collapsible elements:

  • Use descriptive titles that clearly indicate the content

  • Keep content concise and well-organized

  • Maintain consistent spacing between elements

Was this helpful?