Collapsible

<script lang="ts" setup>
import { NNCollapsible } from "@fronntui/vue";
</script>

<template>
  <NNCollapsible :speed="300">
    <template #header> Header </template>
    <div>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, sit.
      Deserunt dignissimos libero excepturi. Non, ut eveniet laudantium sint
      totam, nihil distinctio facere molestiae provident voluptates laborum.
      Sit, fuga illum?
    </div>
  </NNCollapsible>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { NNCollapsible } from "@fronntui/vue";

const accordion1 = ref();
const accordion2 = ref();
const accordion3 = ref();

const handleAccordion = (openEntry: string) => {
  if (openEntry !== "accordion1") {
    accordion1.value.close();
  }
  if (openEntry !== "accordion2") {
    accordion2.value.close();
  }
  if (openEntry !== "accordion3") {
    accordion3.value.close();
  }
};
onMounted(() => {
  accordion1.value.open();
});
</script>

<template>
  <div class="my-accordion">
    <NNCollapsible
      ref="accordion1"
      :speed="200"
      @open="handleAccordion('accordion1')"
    >
      <template #header> Header </template>
      <div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, sit.
        Deserunt dignissimos libero excepturi. Non, ut eveniet laudantium sint
        totam, nihil distinctio facere molestiae provident voluptates laborum.
        Sit, fuga illum?
      </div>
    </NNCollapsible>
    <NNCollapsible
      ref="accordion2"
      :speed="200"
      @open="handleAccordion('accordion2')"
    >
      <template #header> Header </template>
      <div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, sit.
        Deserunt dignissimos libero excepturi. Non, ut eveniet laudantium sint
        totam, nihil distinctio facere molestiae provident voluptates laborum.
        Sit, fuga illum?
      </div>
    </NNCollapsible>
    <NNCollapsible
      ref="accordion3"
      :speed="200"
      @open="handleAccordion('accordion3')"
    >
      <template #header> Header </template>
      <div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, sit.
        Deserunt dignissimos libero excepturi. Non, ut eveniet laudantium sint
        totam, nihil distinctio facere molestiae provident voluptates laborum.
        Sit, fuga illum?
      </div>
    </NNCollapsible>
  </div>
</template>

<style lang="scss">
.my-accordion {
  .nn-collapsible:not(:last-of-type) {
    &::after {
      content: "";
      display: block;
      background: var(--nn-color-gray-100);
      height: 1px;
      margin-top: var(--nn-spacing-6);
      margin-bottom: var(--nn-spacing-5);
    }
  }
}
</style>