Dashboard - Bootstrap accordion components with multiple styles
Basic Accordion
Standard Bootstrap 5 accordion
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element.
This is the second item's accordion body. You can use any HTML elements inside the accordion body, including paragraphs, lists, tables, and more.
This is the third item's accordion body. The accordion component is useful for displaying collapsible content panels for presenting information in a limited amount of space.
Flush Accordion
Accordion without outer borders
Card ending in **** 4242
Next billing date: January 15, 2025
Compact Accordion
Smaller padding for dense layouts
- 09:00 - Team standup meeting
- 11:00 - Client presentation
- 14:00 - Project review
- 10:00 - Department meeting
- 15:00 - Training session
5 meetings scheduled, 3 deadlines approaching
Primary Accordion
Colored header on expand
2,456
Total Users1,234
Active Now89%
SatisfactionView detailed analytics and performance metrics for your dashboard.
Monthly growth increased by 15% compared to last month.
Bordered Accordion
Accordion with prominent borders
| Product Name | Premium Widget |
| Quantity | 2 |
| Total | $199.00 |
Your order is currently in transit and will arrive soon.
Your order is being processed and will ship shortly.
Success Accordion
Green colored header on expand
- check_circleWebsite redesign completed
- check_circleDatabase migration done
- check_circleSecurity audit passed
Currently working on API integration and testing.
Mobile app development scheduled to start next week.
Always Open Accordion
Multiple items can be open simultaneously
An accordion is a vertically stacking list of headers that can be clicked to reveal or hide content associated with them.
Click on any header to expand or collapse its content. Without data-bs-parent, multiple items can stay open.
Use accordions to organize content into collapsible sections, great for FAQs, settings, and more.
Form Accordion
Clean minimal style ideal for forms
Inverse Accordion
Dark themed accordion
Last changed: 30 days ago
3 devices currently connected to your account.
Nested Accordion
Accordion within accordion for hierarchical content
- Document structure
- Semantic elements
- Forms and inputs
- Flexbox and Grid
- Responsive design
- CSS variables
- ES6+ features
- DOM manipulation
- Async programming
Runtime environment, Express.js, middleware patterns
SQL, NoSQL, MongoDB, PostgreSQL
Docker, Kubernetes, CI/CD pipelines, cloud platforms (AWS, GCP, Azure)
Simple Accordion
Clean design without icons
We accept all major credit cards, PayPal, and bank transfers. Payment plans are also available for qualifying orders.
Standard shipping takes 5-7 business days. Express shipping (2-3 days) and overnight options are available at checkout.
We offer a 30-day return policy for unused items in original packaging. Refunds are processed within 5-7 business days.
Accordion with Table
Tables inside accordion panels
| Product | Stock | Status |
|---|---|---|
| Widget A | 150 | In Stock |
| Widget B | 12 | Low Stock |
| Widget C | 0 | Out of Stock |
| Order ID | Customer | Amount |
|---|---|---|
| #1234 | John Doe | $150.00 |
| #1233 | Jane Smith | $89.00 |
