Skip to content

Accordion

Jump to bottom
Martin Bean edited this page Nov 1, 2021 · 1 revision

There are two accordion-related components: <x-bs::accordion> and <x-bs::accordion-item>.

Accordion

Options:

  • flush (boolean)
  • id (string, required)

Defines the accordion container:

<x-bs::accordion id="default-accordion">
    <!-- Default accordion -->
</x-bs::accordion>
<x-bs::accordion flush id="flush-accordion">
    <!-- Accordion with no outer borders -->
</x-bs::accordion>

Accordion item

Options:

  • id (string, required)
  • parent (string, optional)
  • show (boolean, optional)

Slots:

  • header
  • body

Add items to an accordion with the <x-bs::accordion-item> component. The component has two slots: header and body. You can also optionally make an item shown by default by adding the show option.

<x-bs::accordion-item id="default-item">
    <x-slot name="header">Default Item Header</x-slot>
    <x-slot name="body">
        <p>Default item body.</p>
    </x-slot>
</x-bs::accordion-item>
<x-bs::accordion-item id="visible-item" show>
    <x-slot name="header">Visible Item Header</x-slot>
    <x-slot name="body">
        <p>Visible by default item body.</p>
    </x-slot>
</x-bs::accordion-item>

Complete example

<x-bs::accordion id="faq-accordion">
    <x-bs::accordion-item id="faq-accordion-item-1" parent="faq-accordion">
        <x-slot name="header">Item 1</x-slot>
        <x-slot name="body">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque nemo dolor cumque molestiae mollitia sit accusantium iure blanditiis modi non dolore sequi, reprehenderit in dolorem quod labore ab. Earum, neque?§</p>
        </x-slot>
    </x-bs::accordion-item>
    <x-bs::accordion-item id="faq-accordion-item-2" parent="faq-accordion">
        <x-slot name="header">Item 2</x-slot>
        <x-slot name="body">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque nemo dolor cumque molestiae mollitia sit accusantium iure blanditiis modi non dolore sequi, reprehenderit in dolorem quod labore ab. Earum, neque?§</p>
        </x-slot>
    </x-bs::accordion-item>
</x-bs::accordion>

Clone this wiki locally