Accordion
An accordion element to show and hide content.
+
Tailwind and Alpine
Copied!
Pines is a UI library built for AlpineJS and TailwindCSS.
Add AlpineJS and TailwindCSS to your page and then copy and paste any of these elements into your project.
Absolutely! Pines works with any other library or framework. Pines works especially well with the TALL stack.
<div x-data="{
activeAccordion: '',
setActiveAccordion(id) {
this.activeAccordion = (this.activeAccordion == id) ? '' : id
}
}" class="relative w-full mx-auto overflow-hidden text-sm font-normal bg-white border border-gray-200 divide-y divide-gray-200 rounded-md">
<div x-data="{ id: $id('accordion') }" class="cursor-pointer group">
<button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-4 text-left select-none group-hover:underline">
<span>What is Pines?</span>
<svg class="w-4 h-4 duration-200 ease-out" :class="{ 'rotate-180': activeAccordion==id }" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div x-show="activeAccordion==id" x-collapse x-cloak>
<div class="p-4 pt-0 opacity-70">
Pines is a UI library built for AlpineJS and TailwindCSS.
</div>
</div>
</div>
<div x-data="{ id: $id('accordion') }" class="cursor-pointer group">
<button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-4 text-left select-none group-hover:underline">
<span>How do I install Pines?</span>
<svg class="w-4 h-4 duration-200 ease-out" :class="{ 'rotate-180': activeAccordion==id }" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div x-show="activeAccordion==id" x-collapse x-cloak>
<div class="p-4 pt-0 opacity-70">
Add AlpineJS and TailwindCSS to your page and then copy and paste any of these elements into your project.
</div>
</div>
</div>
<div x-data="{ id: $id('accordion') }" class="cursor-pointer group">
<button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-4 text-left select-none group-hover:underline">
<span>Can I use Pines with other libraries or frameworks?</span>
<svg class="w-4 h-4 duration-200 ease-out" :class="{ 'rotate-180': activeAccordion==id }" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div x-show="activeAccordion==id" x-collapse x-cloak>
<div class="p-4 pt-0 opacity-70">
Absolutely! Pines works with any other library or framework. Pines works especially well with the TALL stack.
</div>
</div>
</div>
</div>Not seeing the animation?
We are using the AlpineJS collapse plugin in this example. Simply, include it in your project and you will see the collapse plugin in action.
Data
Below you will find the data properties available in the x-data attribute of this element.
| Property and Description | Description |
|---|---|
| activeAccordion | This will contain the string of the active accordion item (example: 'accordion-1') |
| This will contain the string of the active accordion item (example: 'accordion-1') | |
| setActiveAccordion(id) | This will set the active accordion with the associated id |
| This will set the active accordion with the associated id |
More Examples
Below you will find more Accordion examples you may wish to use in your projects.
Copied!
Pines is a UI library built for AlpineJS and TailwindCSS.
Add AlpineJS and TailwindCSS to your page and then copy and paste any of these elements into your project.
Absolutely! Pines works with any other library or framework. Pines works especially well with the TALL stack.
<div x-data="{
activeAccordion: '',
setActiveAccordion(id) {
this.activeAccordion = (this.activeAccordion == id) ? '' : id
}
}" class="relative w-full max-w-md mx-auto text-xs">
<div x-data="{ id: $id('accordion') }" :class="{ 'border-neutral-200/60 text-neutral-800' : activeAccordion==id, 'border-transparent text-neutral-600 hover:text-neutral-800' : activeAccordion!=id }" class="duration-200 ease-out bg-white border rounded-md cursor-pointer group" x-cloak>
<button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full px-5 py-4 font-semibold text-left select-none">
<span>What is Pines?</span>
<div :class="{ 'rotate-90': activeAccordion==id }" class="relative flex items-center justify-center w-2.5 h-2.5 duration-300 ease-out">
<div class="absolute w-0.5 h-full bg-neutral-500 group-hover:bg-neutral-800 rounded-full"></div>
<div :class="{ 'rotate-90': activeAccordion==id }" class="absolute w-full h-0.5 ease duration-500 bg-neutral-500 group-hover:bg-neutral-800 rounded-full"></div>
</div>
</button>
<div x-show="activeAccordion==id" x-collapse x-cloak>
<div class="p-5 pt-0 opacity-70">
Pines is a UI library built for AlpineJS and TailwindCSS.
</div>
</div>
</div>
<div x-data="{ id: $id('accordion') }" :class="{ 'border-neutral-200/60 text-neutral-800' : activeAccordion==id, 'border-transparent text-neutral-600 hover:text-neutral-800' : activeAccordion!=id }" class="duration-200 ease-out bg-white border rounded-md cursor-pointer group" x-cloak>
<button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full px-5 py-4 font-semibold text-left select-none">
<span>How do I install Pines?</span>
<div :class="{ 'rotate-90': activeAccordion==id }" class="relative flex items-center justify-center w-2.5 h-2.5 duration-300 ease-out">
<div class="absolute w-0.5 h-full bg-neutral-500 group-hover:bg-neutral-800 rounded-full"></div>
<div :class="{ 'rotate-90': activeAccordion==id }" class="absolute w-full h-0.5 ease duration-500 bg-neutral-500 group-hover:bg-neutral-800 rounded-full"></div>
</div>
</button>
<div x-show="activeAccordion==id" x-collapse x-cloak>
<div class="p-5 pt-0 opacity-70">
Add AlpineJS and TailwindCSS to your page and then copy and paste any of these elements into your project.
</div>
</div>
</div>
<div x-data="{ id: $id('accordion') }" :class="{ 'border-neutral-200/60 text-neutral-800' : activeAccordion==id, 'border-transparent text-neutral-600 hover:text-neutral-800' : activeAccordion!=id }" class="duration-200 ease-out bg-white border rounded-md cursor-pointer group" x-cloak>
<button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full px-5 py-4 font-semibold text-left select-none">
<span>Can I use Pines with other libraries or frameworks?</span>
<div :class="{ 'rotate-90': activeAccordion==id }" class="relative flex items-center justify-center w-2.5 h-2.5 duration-300 ease-out">
<div class="absolute w-0.5 h-full bg-neutral-500 group-hover:bg-neutral-800 rounded-full"></div>
<div :class="{ 'rotate-90': activeAccordion==id }" class="absolute w-full h-0.5 ease duration-500 bg-neutral-500 group-hover:bg-neutral-800 rounded-full"></div>
</div>
</button>
<div x-show="activeAccordion==id" x-collapse x-cloak>
<div class="p-5 pt-0 opacity-70">
Absolutely! Pines works with any other library or framework. Pines works especially well with the TALL stack.
</div>
</div>
</div>
</div>
Copied!
Pines is a UI library built for AlpineJS and TailwindCSS.
Add AlpineJS and TailwindCSS to your page and then copy and paste any of these elements into your project.
Absolutely! Pines works with any other library or framework. Pines works especially well with the TALL stack.
<div x-data="{
activeAccordion: '',
setActiveAccordion(id) {
this.activeAccordion = (this.activeAccordion == id) ? '' : id
}
}" class="relative w-full max-w-md mx-auto text-sm font-normal">
<div x-data="{ id: $id('accordion') }" :class="{ 'text-neutral-900': activeAccordion==id, 'text-neutral-600 hover:text-neutral-900': activeAccordion!=id }" class="cursor-pointer group">
<button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-4 pb-1 text-left select-none">
<span>What is Pines?</span>
<svg class="w-5 h-5 duration-300 ease-out" :class="{ '-rotate-[45deg]': activeAccordion==id }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" /></svg>
</button>
<div x-show="activeAccordion==id" x-collapse x-cloak>
<div class="p-4 pt-2 opacity-70">
Pines is a UI library built for AlpineJS and TailwindCSS.
</div>
</div>
</div>
<div x-data="{ id: $id('accordion') }" :class="{ 'text-neutral-900': activeAccordion==id, 'text-neutral-600 hover:text-neutral-900': activeAccordion!=id }" class="cursor-pointer group">
<button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-4 pb-1 text-left select-none">
<span>How do I install Pines?</span>
<svg class="w-5 h-5 duration-300 ease-out" :class="{ '-rotate-[45deg]': activeAccordion==id }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" /></svg>
</button>
<div x-show="activeAccordion==id" x-collapse x-cloak>
<div class="p-4 pt-2 opacity-70">
Add AlpineJS and TailwindCSS to your page and then copy and paste any of these elements into your project.
</div>
</div>
</div>
<div x-data="{ id: $id('accordion') }" :class="{ 'text-neutral-900': activeAccordion==id, 'text-neutral-600 hover:text-neutral-900': activeAccordion!=id }" class="cursor-pointer group">
<button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-4 pb-1 text-left select-none">
<span>Can I use Pines with other libraries or frameworks?</span>
<svg class="w-5 h-5 duration-300 ease-out" :class="{ '-rotate-[45deg]': activeAccordion==id }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" /></svg>
</button>
<div x-show="activeAccordion==id" x-collapse x-cloak>
<div class="p-4 pt-2 opacity-70">
Absolutely! Pines works with any other library or framework. Pines works especially well with the TALL stack.
</div>
</div>
</div>
</div>
