- Plugins
- Collapse
Plugins
Tailwind CSS Collapse
Toggle the visibility of content.
Installation
To get started, install Collapse plugin via npm, else you can skip this step if you are already using Preline UI as a package.
npm i @preline/collapse
Example
Click the buttons below to show and hide another element:
<button type="button" class="hs-collapse-toggle py-3 px-4 inline-flex justify-center items-center gap-2 rounded-lg border border-transparent font-semibold bg-white text-slate-800 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:bg-slate-900 dark:text-white dark:focus:ring-offset-gray-800" id="hs-basic-collapse" data-hs-collapse="#hs-basic-collapse-heading">
Collapse
<svg class="hs-collapse-open:rotate-180 w-2.5 h-2.5 text-slate-800 dark:text-white" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
<div id="hs-basic-collapse-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-collapse">
<div class="mt-5 bg-white rounded-lg py-3 px-4 dark:bg-slate-900">
<p class="text-gray-500 dark:text-gray-400">
This is a collapse body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
Basic usage
Prefer to create your own style? Here is a completely unstylized example.
<button type="button" class="hs-collapse-toggle" id="hs-unstyled-collapse" data-hs-collapse="#hs-unstyled-collapse-heading">
Collapse
</button>
<div id="hs-unstyled-collapse-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-unstyled-collapse">
This is a collapse body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</div>
Events
Open any item event example.
window.addEventListener('open.hs.collapse', ($collapseEl) => {...})
// OR
HSCollapse.on('open', ($collapseEl) => {...})
Open specific item event example.
$collapseEl.addEventListener('open.hs.collapse', (evt) => {...})
Demo examples
Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.
Check out Preline UI Collapses