Widget Demos
UI Components
Marketing
Content Display
Navigation
Notifications
Visual Effects
Interactive
Layout
Layout
Accordion Widget
Bootstrap 5 accordion component with collapsible sections. Perfect for FAQs, feature lists, and grouped content. Supports flush style, icons, and always-open mode.
Basic Accordion
Standard accordion with multiple collapsible sections.
Code
<?php echo AccordionWidget::widget([
'items' => [
['title' => 'Section 1', 'content' => 'Content...', 'expanded' => true],
['title' => 'Section 2', 'content' => 'Content...'],
],
]); ?>Live Demo
This is a production-ready Yii2 application template with authentication, RBAC, multi-language support, and advanced features.
Features include user authentication, admin panel, content management, events system, e-commerce, booking, CRM, and much more.
Clone the repository, run composer install, configure your database, and run the migrations. Check the README for detailed instructions.
FAQ with Icons
Accordion styled as FAQ with question icons.
Code
<?php echo AccordionWidget::widget([
'items' => [
['title' => 'Question?', 'content' => 'Answer...', 'icon' => 'fas fa-question-circle'],
],
]); ?>Live Demo
Click the "Forgot Password" link on the login page and follow the email instructions.
Navigate to your profile and click on the "Orders" tab to view all your orders.
Use the contact form on the Contact Us page or email support@example.com.
Flush Style
Borderless accordion with flush style.
Code
<?php echo AccordionWidget::widget([
'flush' => true,
'items' => [...],
]); ?>Live Demo
Manage your profile information and preferences.
Change your password and manage security settings.
Configure your notification preferences.
Always Open Mode
Multiple sections can be expanded simultaneously.
Code
<?php echo AccordionWidget::widget([
'alwaysOpen' => true,
'items' => [...],
]); ?>Live Demo
General information about the feature.
How to configure and customize.
Advanced tips and tricks.
Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
items | array | [] | Accordion items (title, content, expanded, icon, etc.) |
flush | bool | false | Use flush (borderless) style |
alwaysOpen | bool | false | Allow multiple sections open at once |
translate | bool | true | Translate titles and content |