Comments (1)
Hi, you got to dynamically adding some attributes. I have attached code snippet working with our newest version of Tailwind Elements - beta1.
<script setup>
import { onMounted } from "vue";
const items = [
{ title: "Accordion Item #1", desc: "lorem ipsum1" },
{ title: "Accordion Item #2", desc: "lorem ipsum2" },
];
onMounted(() => {
const collapseButtons = document.querySelectorAll("[data-te-collapse-init]");
for (let i = 1; i < collapseButtons.length; i++) {
collapseButtons[i].setAttribute("data-te-collapse-collapsed", "");
}
const collapseItems = document.querySelectorAll("[data-te-collapse-item]");
collapseItems[0].setAttribute("data-te-collapse-show", "");
});
</script>
<template>
<div id="accordionExample5">
<div
class="rounded-t-lg border border-neutral-200 bg-white dark:border-neutral-600 dark:bg-neutral-800"
v-for="(item, index) in items"
>
<h2 class="mb-0" :id="`heading${index}`">
<button
class="group relative flex w-full items-center rounded-t-[15px] border-0 bg-white py-4 px-5 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-white [&:not([data-te-collapse-collapsed])]:text-primary [&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-800 dark:[&:not([data-te-collapse-collapsed])]:text-primary-400 dark:[&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(75,85,99)]"
type="button"
data-te-collapse-init
:data-te-target="`#collapse${index}`"
aria-expanded="true"
:aria-controls="`#collapse${index}`"
>
{{ item.title }}
<span
class="ml-auto -mr-1 h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:mr-0 group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</span>
</button>
</h2>
<div
:id="`collapse${index}`"
:class="`!visible ${index !== 0 ? 'hidden' : ''}`"
data-te-collapse-item
:aria-labelledby="`heading${index}`"
>
<div class="py-4 px-5">
{{ item.desc }}
</div>
</div>
</div>
</div>
</template>
from tailwind-elements.
Related Issues (20)
- Select/Autocomplete - fix aria-expanded value toggling
- Autocomplete - fix issues with input focus after closing the dropdown on esc
- Popconfirm - fix: way of adding event listeners, `cancel` event and dispose method
- When use tw input inside tw collapse, notch does not get updated correctly HOT 1
- Rating - add inheritance via BaseComponent and fix dispose method
- Lightbox - update image source URLs across all examples
- [Form Input Custom Classes] [data-te-class-notch-leading-valid, middle and trailing not working in Nuxt 3] HOT 2
- [FORMS - SELECT and MODAL] [NOT PROPERLY WORKING] HOT 1
- License AGPL HOT 1
- Timepicker Allow Minutes Step instead of Increment HOT 1
- Datepicker Format to allow more date formats HOT 1
- [Angular integration] [ReferenceError: document is not defined] HOT 3
- [ComponenMobile terminal navigation style problemt name] [description of the issue] HOT 3
- [Angular] - Datepicker re-initialization not wroking HOT 2
- Registration on Site - registration not taking, pw reset not working HOT 8
- v2.0 missing components HOT 4
- Pro vs Free HOT 3
- [Select] Can't attach events to select's options when there are more than 2 selects HOT 1
- Tabs with livewire 3 in laravel 11 and using wire:navigate option does not work HOT 4
- [Select] [duplication of select component when reinitializing it] HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tailwind-elements.