collapsible/introduction

Make a content collapsible: unlike simple visibility toggling, the collapsing will affect the surrounding layout space.

Quick Demo

Quick Start

If you're 100% sure you fully understand how Radix's Collapsible works, you can skip this introduction.

Collapsible is one of the components from Radix that I believe is heavily underappreciated due to its inadequate demo and somewhat misleading introduction in their documentation.

It's an incredible component that deserves a few words so you can understand its potential and use cases.

This component uses this simple anatomy:


    <Collapsible>
      <CollapsibleTrigger/>
      <CollapsibleContent/>
    </Collapsible>

Simple, right? The key thing to understand is that CollapsibleContenttakes up space in the layout - whether it's collapsed or not, it will affect the surrounding elements and spacing!

Now, open your browser's devtools and inspect how CollapsibleContentis rendered in the DOM.

Don't let the demo above limit your imagination. Once you grasp how it works, you'll see it can be used in many situations like:

For more family components and the demos showing how versatile this component can be, check the API reference page.