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.
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.
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.
If the title of your accordion item is not a simple string you can define your content in a title slot.
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.
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.
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.
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.
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.
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"
.
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.
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.
You can define the background colour of the accordion by setting the color
attribute. This is only enforced if grouped="false"
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.
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.
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.
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.
The table below shows a comprehensive list of all the attributes available for the 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 green purple 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" . |
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 green purple 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" . |
resources > views > components > bladewind > accordion > [index.blade.php, item.blade.php]