Collapse

Press the button to show or hide the additional content.

This panel is shown or hidden when you press the button above. You can place any content here: text, forms, tables, etc.

Either button opens or closes the same content.

Both buttons control this same panel. Either one will open or close it.

You can also use a text link to show or hide additional content without interrupting the reading flow.

Links as triggers are useful inside text paragraphs to avoid breaking the visual flow with a large button.

Works with href="#id" or data-bs-target="#id".

Add the show class to the panel so it is visible on page load.

This panel is visible from the start thanks to the show class.

Panel 1 content — primary variant.

Panel 2 content — success variant.

Panel 3 content — warning variant.

The icon rotates 180° when expanding each section, providing clear visual feedback to the user.

First name, last name, date of birth and national ID of the registered user.

Card ending in 4242, expires 12/27. Active and verified payment method.

Email enabled. Push disabled. SMS for critical system alerts only.