1. Components
  2. Collapse

Components

Tailwind CSS Collapse

Preline UI's Tailwind CSS Collapse component represents toggle buttons, to show and hide or collapse and expand content or navigation items, managing its visibility.

Requires JS

Note that this component requires the use of our Collapse plugin, else you can skip this message if you are already using Preline UI as a package.

Collapse (Show/Hide) component enables users to toggle between condensed and expanded views of content, optimizing screen space and providing granular control over information display. The component seamlessly integrates with Tailwind CSS classes, allowing for easy customization to suit various design needs.

Commonly implemented as card toggles, expandable navigation items, or interactive elements in FAQs and product descriptions, the Show/Hide component enhances user engagement and content accessibility. It's ideal for creating responsive, user-friendly interfaces that improve the overall user experience while maintaining a clean design aesthetic.

Example

Basic example of the Collapse (Show/Hide) component, showcasing its functionality and customization options.

Show/Hide

Enhance User Experience with Expandable Content.

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

Destroy and Reinitialize New

Provides destroy method that helps to destroy a collapse.