<!--:Collapse trigger button:-->
<button type="button" class="btn btn-default mb-2" data-bs-toggle="collapse" data-bs-target="#collapseBasic">Show
    collapse
</button>
<!--:Collapse:-->
<div class="collapse" id="collapseBasic">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

<!--:Show more less content:-->
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua Ut enim
    <!--:More content:-->
    <p class="collapse" id="collapseMore">
        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
        dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>
<!--:Button:-->
<button class="border-b border-dashed border-stone-200 cursor-pointer" data-bs-toggle="collapse" data-bs-target="#collapseMore">
    <span class="show-more text-primary inline-flex items-center">
        Show more <span class="icon-[lucide--plus]"></span>
    </span>
    <span class="show-less items-center">
        Show less <span class="icon-[iconoir--minus]"></span>
    </span>
</button>

<div class="divide-y divide-stone-100 dark:divide-stone-900" id="accordionExample">
    <!--:Collapse item:-->
    <div class="collapse-item">
        <button class="flex w-full items-center justify-between cursor-pointer py-2.5" type="button"
            data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <h5 class="text-lg flex-grow truncate text-start">Accordion Item #1</h5>
            <span class="icon-[lucide--chevron-up] collapse-arrow shrink-0 size-6 flex items-center justify-center"></span>
        </button>
        <div id="collapseOne" class="collapse show" data-bs-parent="#accordionExample">
            <div class="pb-4">
                Content...
            </div>
        </div>
    </div>
    <!--:Collapse item:-->
    <div class="collapse-item">
        <button class="flex w-full items-center justify-between cursor-pointer py-2.5 collapsed" type="button"
            data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            <h5 class="text-lg flex-grow truncate text-start">Accordion Item #2</h5>
            <span class="icon-[lucide--chevron-up] collapse-arrow shrink-0 size-6 flex items-center justify-center"></span>
        </button>
        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="pb-4">
                Content...
            </div>
        </div>
    </div>
    <!--:Collapse item:-->
    <div class="collapse-item">
        <button class="flex w-full items-center justify-between cursor-pointer py-2.5 collapsed" type="button"
            data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false"
            aria-controls="collapseThree">
            <h5 class="text-lg flex-grow truncate text-start">Accordion Item #3</h5>
            <span class="icon-[lucide--chevron-up] collapse-arrow shrink-0 size-6 flex items-center justify-center"></span>
        </button>
        <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="pb-4">
               Content...
            </div>
        </div>
    </div>
</div>