Accordions
Notifications
Clear All

You have 3 new messages

2 minutes ago

Your report is ready

1 hour ago

System update scheduled

Yesterday
View All Notifications
Theme Customization
Theme Presets
Color Scheme
Layouts
Sidebar Size
Smart Theme
Direction
Header Theme
Sidebar Theme
Basic Accordion

This is the first item's accordion body. It is shown by default. The collapse plugin handles the height transitions and toggles the arrow indicator dynamically.

This is the second item's accordion body. It is hidden by default. Click the header to toggle the expansion panel.

This is the third item's accordion body. It is hidden by default. All accordion items collapse when a new one is opened.
Bordered Accordion

Bordered accordion body. This style features an explicit container outline and clean internal boundaries separating header items.

Placeholder text for the second bordered accordion segment.

Placeholder text for the third bordered accordion segment.
Flush Accordion (No Outer Borders)

Flush style. Removes the default background-color, outer borders, and rounded corners to blend seamlessly within a card block.

Placeholder text for the second flush accordion segment.

Placeholder text for the third flush accordion segment.
Always Open Accordion

Multiple expanded panels. This variant omits the parent reference attribute (`data-bs-parent`), meaning that expanding one item does not force the others to collapse.

Placeholder text for the second independent accordion segment.

Placeholder text for the third independent accordion segment.
Separated Card Accordion

Separated card-like blocks. In this advanced style, items are split into individual cards with custom margins, rounded borders, and subtle shadow offsets.

Placeholder text for the second separated block.

Placeholder text for the third separated block.
Without Arrow Accordion

Arrow removed. This accordion hides the default CSS chevron indicator using pure CSS overrides for a flatter layout.

Placeholder text for the second arrowless block.

Placeholder text for the third arrowless block.
Custom Icon Accordion (Plus / Minus)

Custom plus/minus indicators. We hide the default rotating chevron and overlay Lucide icons, toggled automatically using CSS class logic.

Placeholder content for the second accordion item.

Placeholder content for the third accordion item.
Accordions with Colored Icons

Primary colored icon. Embellished with a themed Lucide icon inside the header text to denote categories or states.

Success colored icon. Prompts visual cues indicating validation or completions.

Danger colored icon. Perfect for notices, errors, or alerts.
Color Left Border Accordion Showcase

Primary Left Border. Combines card-like separation with a thick primary brand border.

Success Left Border. Great for verified tasks, reports, or approved records.

Danger Left Border. Focuses user attention instantly on critical warnings.

Warning Left Border. Subtle alert category highlight.

Info Left Border. Clean layout style matching standard blue-teal details.

Secondary Left Border. Neutral accent color.

Dark Left Border. Deep color accent.

Light Left Border. Soft gray contrast border highlight.