haditha_ui/components/hadith/library-show/AccordionMenu..vue

<script setup>
const props = defineProps({
  list: {
    default() {
      return [];
    },
  },
  noDataText: {
    default: "نتیجه‌ای یافت نشد!",
  },
  noDataIcon: {
    default: "/img/no-data.png",
  },
});

const items = [
  {
    label: "Parent 1",
    content: "This is the content of Parent 1",
    children: [
      {
        label: "Child 1.1",
        content: "This is the content of Child 1.1",
      },
      {
        label: "Child 1.2",
        content: "This is the content of Child 1.2",
      },
    ],
  },
  {
    label: "Parent 2",
    content: "This is the content of Parent 2",
    children: [
      {
        label: "Child 2.1",
        content: "This is the content of Child 2.1",
      },
      {
        label: "Child 2.2",
        content: "This is the content of Child 2.2",
      },
    ],
  },
];

function toggleAccordion(id) {
  const allHiddenClasses = querySelectorAll(".hidden");
  console.info(element);

  allHiddenClasses.forEach((element) => {
    console.info(element);
    // element.classList.remove('hidden')
  });
  const content = document.getElementById(`content-${id}`);
  const icon = document.getElementById(`icon-${id}`);

  // Toggle visibility
  content.classList.toggle("hidden");
  // Rotate icon
  icon.classList.toggle("rotate-180");
}
</script>

<template>
  <div class="accordion-menu max-w-xl mx-auto p-4">
    <!-- Parent Accordion Item 1 -->
    <div class="mb-2">
      <button
        class="w-full flex justify-between items-center p-4 bg-gray-100 rounded-lg hover:bg-gray-200 transition-all delay-500 duration-300 ease-in-out"
        @click.prevent="toggleAccordion('parent1')"
      >
        <span>Parent 1</span>
        <svg
          id="icon-parent1"
          class="w-5 h-5 transform transition-transform"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"
          />
        </svg>
      </button>
      <div
        id="content-parent1"
        class="mt-2 pl-4 hidden transition delay-500 duration-300 ease-in-out"
      >
        <!-- Child Accordion Item 1 -->
        <div class="mb-2 transition delay-500 duration-300 ease-in-out">
          <button
            class="w-full flex justify-between items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-all"
            @click.prevent="toggleAccordion('child1')"
          >
            <span>Child 1.1</span>
            <svg
              id="icon-child1"
              class="w-5 h-5 transform transition-transform"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              />
            </svg>
          </button>
          <div id="content-child1" class="mt-2 pl-4 hidden">
            <p class="p-3 bg-gray-50 rounded-lg">
              This is the content of Child 1.1.
            </p>
          </div>
        </div>
        <!-- Child Accordion Item 2 -->
        <div class="mb-2 transition delay-500 duration-300 ease-in-out">
          <button
            class="w-full flex justify-between items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-all"
            @click.prevent="toggleAccordion('child2')"
          >
            <span>Child 1.2</span>
            <svg
              id="icon-child2"
              class="w-5 h-5 transform transition-transform"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              />
            </svg>
          </button>
          <div id="content-child2" class="mt-2 pl-4 hidden">
            <p class="p-3 bg-gray-50 rounded-lg">
              This is the content of Child 1.2.
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Parent Accordion Item 2 -->
    <div class="mb-2">
      <button
        class="w-full flex justify-between items-center p-4 bg-gray-100 rounded-lg hover:bg-gray-200 transition-all"
        @click.prevent="toggleAccordion('parent2')"
      >
        <span>Parent 2</span>
        <svg
          id="icon-parent2"
          class="w-5 h-5 transform transition-transform"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"
          />
        </svg>
      </button>
      <div id="content-parent2" class="mt-2 pl-4 hidden">
        <p class="p-3 bg-gray-50 rounded-lg">
          This is the content of Parent 2.
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped></style>