Accordion open but doesnt close with v-for vuejs

[Spliterr]

              Why is the accordion been opened but it doenst close? Help, please!

<h2 class="mb-0 accordion-header" :id="heading${index+1}5"> <button class="relative flex items-center w-full px-5 py-4 text-base text-left text-gray-800 transition bg-white border-0 rounded-none accordion-button collapsed focus:outline-none" type="button" data-bs-toggle="collapse" :data-bs-target="#collapse${index+1}5" aria-expanded="false" :aria-controls="collapse${index+1}5`">

                Title
                
              </button>
            </h2>
            <div :id="`collapse${index+1}5`" class="accordion-collapse collapse"
              :aria-labelledby="`heading${index+1}5`">`
              
              
              i'm trying the Always Open: https://tailwind-elements.com/docs/standard/components/accordion/

[Trochonovitz]

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>