vue3-rich-accordion

via yarn

yarn add vue3-rich-accordion

or via npm

npm i vue3-rich-accordion

// ./src/main.ts

import { createApp } from "vue";
import App from "./App.vue";
import { useAccordion } from "vue3-rich-accordion";
import "vue3-rich-accordion/accordion-library-styles.css";
//import "vue3-rich-accordion/accordion-library-styles.scss"; if you wanna to use scss

const app = createApp(App);
app.use(useAccordion);

app.mount("#app");

or you can use via importing sfc

// SomeVueComponent.vue
<script setup>
    import { AccordionList, AccordionItem } from "vue3-rich-accordion";
</script>

You can see the full example on demo page Also you can see code example in AccordionSandbox.vue

    interface IAccordionListProps {
    openMultipleItems ? : boolean;      // if true you can open multiple items same time
    state ? : Record<string, boolean>;  // representing list state {"id1": true, "id2": false} - means 1 item is opened and 2 one is closed
    setClosePropertyTime ? : number;    // do not touch if everything is ok. it is used to order closing and animation 
}

interface IAccordionItemProps {
    id?: string;                //Custom id. It is the key in the state object of AccordionList
    defaultOpened?: boolean;    // if provided item would be opened by default. 
    disabled?: boolean          // is item disabled or not 
}

<AccordionItem>
    <template #summary>Item summary</template>
    <template #icon>☝️</template>
    <h3>Main content</h3>
</AccordionItem>

import "vue3-rich-accordion/accordion-library-styles.css";
//import "vue3-rich-accordion/accordion-library-styles.scss"; if you wanna to use scss

You also can clone this files and change for your design

Default icon is described in styles, you can change it via styles customization