logo
v2.8.1

Accordion

The accordion component allows users to expand or collapse sections of content. It’s commonly used to organize information in a compact, accessible way. Each section typically has a header that can be clicked to toggle the visibility of its associated content.

What is BladewindUI?

BladewindUI is a collection of super simple but elegant Laravel blade-based UI components using TailwindCSS and vanilla Javascript. When I decided to move away from JQuery, that indirectly meant I had to find an alternative to the lovely Semantic UI components I had gotten so used to. Well, that was how these components were born.

How can I install the latest version of the library?
At the root of your Laravel project, type the following composer command in your terminal to pull in the package. 
composer require mkocansey/bladewind
Next you need to publish the package's public assets by running the command below, still at the root of your Laravel project. This will create a vendor/bladewind directory in your public directory.
How can I customize the library for my theme?
BladewindUI has been designed to not interfere with the existing components in your project. Probably you just want to take this for a spin before deciding if BladewindUI components will be the only components you use in your project. Once installed, all BladewindUI components are invoked by default from your project's vendor > mkocansey > bladewind directory. Per Laravel convention, this results in you having to type the <x-bladewind prefix everytime you want to use a BladewindUI component. 

<x-bladewind::accordion>
    <x-bladewind::accordion.item title="What is BladewindUI?">
        <p>
            BladewindUI is a collection...
        </p>
    </x-bladewind::accordion.item>
    <x-bladewind::accordion.item title="How can I install the latest version of the library?">
        <div>
            At the root of your Laravel...
        </div>
    </x-bladewind::accordion.item>
    <x-bladewind::accordion.item title="How can I customize the library for my theme?">
        <div>
            BladewindUI has been designed ...
        </div>
    </x-bladewind::accordion.item>
</x-bladewind::accordion>

If the title of your accordion item is not a simple string you can define your content in a title slot.

logo
What is BladewindUI library?
version 2.8.0

BladewindUI is a collection of super simple but elegant Laravel blade-based UI components using TailwindCSS and vanilla Javascript. When I decided to move away from JQuery, that indirectly meant I had to find an alternative to the lovely Semantic UI components I had gotten so used to. Well, that was how these components were born.

How can I install the latest version of the library?
At the root of your Laravel project, type the following composer command in your terminal to pull in the package. 
composer require mkocansey/bladewind
Next you need to publish the package's public assets by running the command below, still at the root of your Laravel project. This will create a vendor/bladewind directory in your public directory.
How can I customize the library for my theme?
BladewindUI has been designed to not interfere with the existing components in your project. Probably you just want to take this for a spin before deciding if BladewindUI components will be the only components you use in your project. Once installed, all BladewindUI components are invoked by default from your project's vendor > mkocansey > bladewind directory. Per Laravel convention, this results in you having to type the <x-bladewind prefix everytime you want to use a BladewindUI component. 


<x-bladewind::accordion>
    <x-bladewind::accordion.item>
        <x-slot:title>
            <div class="inline-flex">
                <div><img src="/assets/images/icon.png" class="size-10..." alt="logo"/></div>
                <div class="ml-2">
                    <div>What is BladewindUI library?</div>
                    <div class="text-sm ...">version 2.8.0</div>
                </div>
            </div>
        </x-slot:title>
        <p>
            BladewindUI is a collection...
        </p>
    </x-bladewind::accordion.item>
    ...
</x-bladewind::accordion>

Open Multiple Accordion Items

By default only one accordion can stay open at any point in time. You can disable this feature by setting can_open_multiple="true". Now any closed accordion that is clicked will be opened. Likewise, any accordion that is open will closed when clicked.

What is BladewindUI?

BladewindUI is a collection of super simple but elegant Laravel blade-based UI components using TailwindCSS and vanilla Javascript. When I decided to move away from JQuery, that indirectly meant I had to find an alternative to the lovely Semantic UI components I had gotten so used to. Well, that was how these components were born.

How can I install the latest version of the library?
At the root of your Laravel project, type the following composer command in your terminal to pull in the package. 
composer require mkocansey/bladewind
Next you need to publish the package's public assets by running the command below, still at the root of your Laravel project. This will create a vendor/bladewind directory in your public directory.
How can I customize the library for my theme?
BladewindUI has been designed to not interfere with the existing components in your project. Probably you just want to take this for a spin before deciding if BladewindUI components will be the only components you use in your project. Once installed, all BladewindUI components are invoked by default from your project's vendor > mkocansey > bladewind directory. Per Laravel convention, this results in you having to type the <x-bladewind prefix everytime you want to use a BladewindUI component. 

<x-bladewind::accordion
    can_open_multiple="true">
    <x-bladewind::accordion.item title="What is BladewindUI?">
        <p>
            BladewindUI is a collection...
        </p>
    </x-bladewind::accordion.item>
    <x-bladewind::accordion.item title="How can I install the latest version of the library?">
        <div>
            At the root of your Laravel...
        </div>
    </x-bladewind::accordion.item>
    <x-bladewind::accordion.item title="How can I customize the library for my theme?">
        <div>
            BladewindUI has been designed ...
        </div>
    </x-bladewind::accordion.item>
</x-bladewind::accordion>

Ungrouped Accordions

The examples above showed the accordion items within one card element. Each accordion is separated by a line. To separate accordion items so they stand alone, set grouped="false".

What is BladewindUI?

BladewindUI is a collection of super simple but elegant Laravel blade-based UI components using TailwindCSS and vanilla Javascript. When I decided to move away from JQuery, that indirectly meant I had to find an alternative to the lovely Semantic UI components I had gotten so used to. Well, that was how these components were born.

How can I install the latest version of the library?
At the root of your Laravel project, type the following composer command in your terminal to pull in the package. 
composer require mkocansey/bladewind
Next you need to publish the package's public assets by running the command below, still at the root of your Laravel project. This will create a vendor/bladewind directory in your public directory.
How can I customize the library for my theme?
BladewindUI has been designed to not interfere with the existing components in your project. Probably you just want to take this for a spin before deciding if BladewindUI components will be the only components you use in your project. Once installed, all BladewindUI components are invoked by default from your project's vendor > mkocansey > bladewind directory. Per Laravel convention, this results in you having to type the <x-bladewind prefix everytime you want to use a BladewindUI component. 

<x-bladewind::accordion
    grouped="false">
    <x-bladewind::accordion.item title="What is BladewindUI?">
        <p>
            BladewindUI is a collection...
        </p>
    </x-bladewind::accordion.item>
    <x-bladewind::accordion.item title="How can I install the latest version of the library?">
        <div>
            At the root of your Laravel...
        </div>
    </x-bladewind::accordion.item>
    <x-bladewind::accordion.item title="How can I customize the library for my theme?">
        <div>
            BladewindUI has been designed ...
        </div>
    </x-bladewind::accordion.item>
</x-bladewind::accordion>

Colourful Accordions

You can define the background colour of the accordion by setting the color attribute. This is only enforced if grouped="false"

What is BladewindUI?

BladewindUI is a collection of super simple but elegant Laravel blade-based UI components using TailwindCSS and vanilla Javascript. When I decided to move away from JQuery, that indirectly meant I had to find an alternative to the lovely Semantic UI components I had gotten so used to. Well, that was how these components were born.

How can I install the latest version of the library?
At the root of your Laravel project, type the following composer command in your terminal to pull in the package. 
composer require mkocansey/bladewind
Next you need to publish the package's public assets by running the command below, still at the root of your Laravel project. This will create a vendor/bladewind directory in your public directory.
How can I customize the library for my theme?
BladewindUI has been designed to not interfere with the existing components in your project. Probably you just want to take this for a spin before deciding if BladewindUI components will be the only components you use in your project. Once installed, all BladewindUI components are invoked by default from your project's vendor > mkocansey > bladewind directory. Per Laravel convention, this results in you having to type the <x-bladewind prefix everytime you want to use a BladewindUI component. 

<x-bladewind::accordion
    grouped="false"
    color="yellow">
    <x-bladewind::accordion.item title="What is BladewindUI?">
        <p>
            BladewindUI is a collection...
        </p>
    </x-bladewind::accordion.item>
...
</x-bladewind::accordion>

What is BladewindUI?

BladewindUI is a collection of super simple but elegant Laravel blade-based UI components using TailwindCSS and vanilla Javascript. When I decided to move away from JQuery, that indirectly meant I had to find an alternative to the lovely Semantic UI components I had gotten so used to. Well, that was how these components were born.

How can I install the latest version of the library?
At the root of your Laravel project, type the following composer command in your terminal to pull in the package. 
composer require mkocansey/bladewind
Next you need to publish the package's public assets by running the command below, still at the root of your Laravel project. This will create a vendor/bladewind directory in your public directory.
How can I customize the library for my theme?
BladewindUI has been designed to not interfere with the existing components in your project. Probably you just want to take this for a spin before deciding if BladewindUI components will be the only components you use in your project. Once installed, all BladewindUI components are invoked by default from your project's vendor > mkocansey > bladewind directory. Per Laravel convention, this results in you having to type the <x-bladewind prefix everytime you want to use a BladewindUI component. 

<x-bladewind::accordion
    grouped="false"
    color="pink">
...
</x-bladewind::accordion>

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Accordion component.

IMPORTANT: Projects running Laravel 8 please read this

Accordion Component

Option Default Available Values
grouped true Should the accordion items be grouped within one card container. If true, the accordions are divided by lines and grouped in one big container.
true false
can_open_multiple false Should the accordion allow opening of items without first closing what is open.
true false
color blank The accordion background. Applicable when grouped="false"

primary blue red yellow greenpurple pink orange black cyan violet indigo fuchsia
class blank Any additional css classes can be added using this attribute. For example to make your accordion more rounded you can add class="rounded-2xl".

Accordion Item Component

Option Default Available Values
open false Should the accordion items be opened or closed by default.
true false
title blank Label to display as the title of the accordion.
color blank The accordion background. Applicable when grouped="false"

primary blue red yellow greenpurple pink orange black cyan violet indigo fuchsia
class blank Any additional css classes can be added using this attribute. For example to make your accordion more rounded you can add class="rounded-2xl".

Accordion with all attributes defined

        
            <x-bladewind::accordion
                grouped="false"
                can_open_multiple="false"
                color="pink"
                class="rounded-lg shadow-sm">
            ...
            </x-bladewind::accordion>

Accordion Item with all attributes defined

        
            <x-bladewind::accordion.item
                color="blue"
                open="false"
                title="What is BladewindUI?"
                class="shadow">
            ...
            </x-bladewind::accordion.item>
The source file for this component is available in resources > views > components > bladewind > accordion > [index.blade.php, item.blade.php]