- Plugins
- Accordion
Plugins
Tailwind CSS Accordion
Build vertically collapsing accordions in combination with Accordion JavaScript plugin.
Installation
To get started, install Accordion plugin via npm, else you can skip this step if you are already using Preline UI as a package.
npm i @preline/accordion
Example
Click the accordions below to expand/collapse the accordion content.
<div class="hs-accordion-group">
<div class="hs-accordion active" id="hs-basic-heading-one">
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 px-6 py-3 inline-flex items-center gap-x-3 text-sm w-full font-semibold text-start text-gray-800 hover:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" aria-controls="hs-basic-collapse-one">
<svg class="hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-4 h-4 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
<svg class="hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-4 h-4 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
Accordion #1
</button>
<div id="hs-basic-collapse-one" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-heading-one">
<div class="pb-4 px-6">
<p class="text-sm text-gray-600 dark:text-gray-200">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
</p>
</div>
</div>
</div>
<div class="hs-accordion" id="hs-basic-heading-two">
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 px-6 py-3 inline-flex items-center gap-x-3 text-sm w-full font-semibold text-start text-gray-800 hover:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" aria-controls="hs-basic-collapse-two">
<svg class="hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-4 h-4 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
<svg class="hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-4 h-4 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
Accordion #2
</button>
<div id="hs-basic-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-heading-two">
<div class="pb-4 px-6">
<p class="text-sm text-gray-600 dark:text-gray-200">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
</p>
</div>
</div>
</div>
<div class="hs-accordion" id="hs-basic-heading-three">
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 px-6 py-3 inline-flex items-center gap-x-3 text-sm w-full font-semibold text-start text-gray-800 hover:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" aria-controls="hs-basic-collapse-three">
<svg class="hs-accordion-active:hidden hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 block w-4 h-4 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
<svg class="hs-accordion-active:block hs-accordion-active:text-blue-600 hs-accordion-active:group-hover:text-blue-600 hidden w-4 h-4 text-gray-600 group-hover:text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
Accordion #3
</button>
<div id="hs-basic-collapse-three" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-heading-three">
<div class="pb-4 px-6">
<p class="text-sm text-gray-600 dark:text-gray-200">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
</p>
</div>
</div>
</div>
</div>
Basic usage
Prefer to create your own style? Here is a completely unstylized example.
<div class="hs-accordion-group">
<div class="hs-accordion active" id="hs-unstyled-heading-one">
<button class="hs-accordion-toggle" aria-controls="hs-unstyled-collapse-one">
Accordion #1
</button>
<div id="hs-unstyled-collapse-one" class="hs-accordion-content overflow-hidden transition-[height] duration-300" aria-labelledby="hs-unstyled-heading-one">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
</div>
</div>
<div class="hs-accordion" id="hs-unstyled-heading-two">
<button class="hs-accordion-toggle" aria-controls="hs-unstyled-collapse-two">
Accordion #2
</button>
<div id="hs-unstyled-collapse-two" class="hs-accordion-content hidden overflow-hidden transition-[height] duration-300" aria-labelledby="hs-unstyled-heading-two">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
</div>
</div>
<div class="hs-accordion" id="hs-unstyled-heading-three">
<button class="hs-accordion-toggle" aria-controls="hs-unstyled-collapse-three">
Accordion #3
</button>
<div id="hs-unstyled-collapse-three" class="hs-accordion-content hidden overflow-hidden transition-[height] duration-300" aria-labelledby="hs-unstyled-heading-three">
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
</div>
</div>
</div>
Methods
The HSAccordion
object is contained within the global window
object
Open item (public method).
const accordion = new HSAccordion(document.querySelector('#accordion'));
const showBtn = document.querySelector('#show-btn');
showBtn.addEventListener('click', () => {
accordion.show();
});
Open item (static method).
const showBtn = document.querySelector('#show-btn');
showBtn.addEventListener('click', () => {
HSAccordion.show('#accordion');
});
Open item (mixed).
const { element } = HSAccordion.getInstance('#accordion', true);
const showBtn = document.querySelector('#show-btn');
showBtn.addEventListener('click', () => {
element.show();
});
Events
When item opens event example.
const el = HSAccordion.getInstance('#accordion');
el.on('open', (el) => {...});
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 Accordions