Welcome to our platform! This guide will help you get started with the basics. Follow the steps below to set up your account and begin using our features.
Accordion
Default Accordion
Basic collapsible accordion panels
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. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
Flush Accordion
Accordion without borders and rounded corners
Placeholder content for this accordion, which is intended to demonstrate the
.accordion-flush class. This is the first item's accordion body.Placeholder content for this accordion, which is intended to demonstrate the
.accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.Placeholder content for this accordion, which is intended to demonstrate the
.accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content.Accordion Variations
Always Open
Multiple items can be open at once
This accordion has no parent constraint. Each item can be opened independently without closing others. This is useful for FAQ sections where users might want to compare multiple answers.
Both items are open by default. Notice that there's no
data-bs-parent attribute on the collapse elements, allowing them to stay open independently.
This item starts collapsed. But you can open it without affecting the other items above.
With Icons
Accordion items with leading icons
Manage your account settings including your profile information, email preferences, and security options. You can update your display name, avatar, and contact information here.
Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, and review your login history.
Configure how and when you receive notifications. Choose between email, push notifications, or SMS for different types of alerts and updates.
Manage your billing information, view invoices, and update payment methods. You can also change your subscription plan or cancel at any time.
Colored Accordions
Primary Accordion
Custom styled with primary color
Follow our step-by-step installation guide to set up the software on your system. We support Windows, macOS, and Linux platforms.
Customize the application to suit your needs with our extensive configuration options. You can adjust settings for performance, appearance, and behavior.
Success Accordion
Custom styled with success color
Your order has been confirmed and is being processed. You will receive an email confirmation shortly with your order details.
We have successfully received your payment. Thank you for your purchase! Your transaction ID is #TXN-2024-001234.
Your order will be shipped within 1-2 business days. You can track your shipment using the tracking number that will be sent to your email.
Accordion with Rich Content
With Lists & Tables
Accordion containing various content types
- Unlimited storage space
- Priority customer support
- Advanced analytics dashboard
- Custom integrations
- API access
| Plan | Users | Price |
|---|---|---|
| Starter | 1-5 | $9/mo |
| Professional | 6-20 | $29/mo |
| Enterprise | Unlimited | $99/mo |
Nested Accordion
Accordion within accordion
Smartphones, Laptops, Tablets, Accessories
Men's, Women's, Kids, Accessories
Business, Technical, Marketing
Web, Mobile, Desktop, API
Our support team is available 24/7 to assist you with any questions or issues.
Real-World Examples
FAQ Section
Common frequently asked questions pattern
Click on the "Forgot Password" link on the login page. Enter your email address, and we'll send you a link to reset your password. The link expires after 24 hours.
Yes, you can cancel your subscription at any time from your account settings. You'll continue to have access until the end of your billing period.
Absolutely! We use industry-standard encryption (AES-256) for all data at rest and in transit. We also perform regular security audits and penetration testing.
Yes, we offer a 14-day free trial with full access to all features. No credit card required to start your trial.
Order Summary
E-commerce checkout pattern
Product A × 2
$58.00
Product B × 1
$89.00
Subtotal
$147.00
10% discount applied (-$14.70)
Subtotal
$147.00
Shipping
$9.99
Discount
-$14.70
Total
$142.29