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, event) {
  const content = document.getElementById(`content-${id}`);
  const icon = document.getElementById(`icon-${id}`);

  event.target.classList.toggle("active");
  // Toggle visibility
  content.classList.toggle("hidden");
  // Rotate icon
  icon.classList.toggle("active");
}
</script>

<template>
  <div class="accordion-menu max-w-xl mx-auto p-4">
    <!-- Parent Accordion Item 1 -->
    <div class="accordion-menu-item mb-2">
      <button
        type="button"
        class="w-full flex justify-start items-center p-4 bg-gray-100 rounded-lg hover:bg-gray-200 transition-all delay-500 duration-300 ease-in-out"
        @click.exact="toggleAccordion('parent1', $event)"
      >
        <div id="icon-parent1" class="icon-container">
          <UIcon class="plus" name="i-lucide-plus"></UIcon>
          <UIcon class="minus" name="i-lucide-minus"></UIcon>
        </div>
        <span>فصل اول</span>
      </button>
      <div
        id="content-parent1"
        class="mt-2 pe-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.exact.prevent="toggleAccordion('child1', $event)"
          >
            <div id="icon-child1" class="icon-container">
              <UIcon class="plus" name="i-lucide-plus"></UIcon>
              <UIcon class="minus" name="i-lucide-minus"></UIcon>
            </div>

            <span>Child 1.1</span>
          </button>
          <div id="content-child1" class="mt-2 pe-4 hidden">
            <!-- dadadad -->
            <button
              class="w-full flex justify-between items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-all"
              @click.exact.prevent="toggleAccordion('child3', $event)"
            >
              <div id="icon-parent3" class="icon-container">
                <UIcon class="plus" name="i-lucide-plus"></UIcon>
                <UIcon class="minus" name="i-lucide-minus"></UIcon>
              </div>

              <span>Child 1.1</span>
            </button>
            <div id="content-child3" class="mt-2 pe-4 hidden">
              <p class="p-3 bg-gray-50 rounded-lg">
                This is the content of Child 1.1.
              </p>
            </div>

            <!-- sdsadadasd -->
            <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.exact.prevent="toggleAccordion('child2', $event)"
          >
            <div id="icon-child2" class="icon-container">
              <UIcon class="plus" name="i-lucide-plus"></UIcon>
              <UIcon class="minus" name="i-lucide-minus"></UIcon>
            </div>
            <span>Child 1.2</span>
          </button>
          <div id="content-child2" class="mt-2 pe-4 hidden">
            <p class="p-3 bg-gray-50 rounded-lg">
              This is the content of Child 1.2.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.accordion-menu {
  .accordion-menu-item {
    font-family: IRANSansX;
    font-weight: 400;
    font-size: 13px;
    line-height: 19.5px;
    letter-spacing: 0%;
    text-align: right;
    color: var(--ui-color-two);

    .icon-container {
      .minus {
        display: none;
      }
      .plus {
        display: inline-block;
      }
    }

    .icon-container {
      &.active {
        .plus {
          display: none;
        }
        .minus {
          display: inline-block;
        }
      }
    }

    button.active {
      border: 0.3px solid #29d985;
      background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);

      button {
        background: #f7fffd;
        border: 0.3px solid #29d985;
      }
    }
  }
}
</style>