TallCraftUI

UI Components

Accordion

Cyber Week Mega Offer!

Huge discounts on all Hostinger plans

Use our referral link for an extra 20% off!

Claim Your Discount Now

# Basic usage

Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, cupiditate! 
<x-accordion>
    <x-accordion-item id="item1" title="Accordion Item 1">
        Lorem ipsum dolor sit amet consectetur.
    </x-accordion-item>
 
    <x-accordion-item id="item2" title="Accordion Item 2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </x-accordion-item>
 
    <x-accordion-item id="item3" title="Accordion Item 3">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, cupiditate!
    </x-accordion-item>
</x-accordion>

# Active item

Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, cupiditate! 
@php
    // public string $activeItem = 'item-2';
@endphp
 
<x-accordion wire:model="activeItem">
    <x-accordion-item id="item-1" title="Accordion Item 1">
        Lorem ipsum dolor sit amet consectetur.
    </x-accordion-item>
 
    <x-accordion-item id="item-2" title="Accordion Item 2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </x-accordion-item>
 
    <x-accordion-item id="item-3" title="Accordion Item 3">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, cupiditate!
    </x-accordion-item>
</x-accordion>

# With plus minus icon

Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, cupiditate! 
<x-accordion>
    <x-accordion-item id="item1" title="Accordion Item 1" icon-plus-minus>
        Lorem ipsum dolor sit amet consectetur.
    </x-accordion-item>
 
    <x-accordion-item id="item2" title="Accordion Item 2" icon-plus-minus>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </x-accordion-item>
 
    <x-accordion-item id="item3" title="Accordion Item 3" icon-plus-minus>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, cupiditate!
    </x-accordion-item>
</x-accordion>

# Without border

Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, cupiditate! 
<x-accordion borderless>
    <x-accordion-item id="item1" title="Accordion Item 1" icon-plus-minus>
        Lorem ipsum dolor sit amet consectetur.
    </x-accordion-item>
 
    <x-accordion-item id="item2" title="Accordion Item 2" icon-plus-minus>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </x-accordion-item>
 
    <x-accordion-item id="item3" title="Accordion Item 3" icon-plus-minus>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, cupiditate!
    </x-accordion-item>
</x-accordion>

# With active border

Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, cupiditate! 
<x-accordion borderless>
    <x-accordion-item id="item1" title="Accordion Item 1" icon-plus-minus active-border>
        Lorem ipsum dolor sit amet consectetur.
    </x-accordion-item>
 
    <x-accordion-item id="item2" title="Accordion Item 2" icon-plus-minus active-border>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </x-accordion-item>
 
    <x-accordion-item id="item3" title="Accordion Item 3" icon-plus-minus active-border>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, cupiditate!
    </x-accordion-item>
</x-accordion>

# Customize accordion

Use standard css classes to style the accordion component. Additionally, apply the class:title and class:content attributes to specifically customize the appearance of the title and content sections.
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, cupiditate! 
<x-accordion class="shadow-sm">
    <x-accordion-item id="item1" title="Accordion Item 1" class:title="text-base group-hover:no-underline">
        Lorem ipsum dolor sit amet consectetur.
    </x-accordion-item>
 
    <x-accordion-item id="item2" title="Accordion Item 2" class:title="text-base group-hover:no-underline">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </x-accordion-item>
 
    <x-accordion-item id="item3" title="Accordion Item 3" class:title="text-base group-hover:no-underline">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, cupiditate!
    </x-accordion-item>
</x-accordion>
Code highlighting powered by Torchlight