Accordion Widget¶
Description¶
The Accordion Widget displays a list of expandable and collapsible items. Users can click on a heading to show or hide the content inside.
Page Builder Name: Accordion | PapaThemes
Version: 1.0.0
Features¶
- ✅ Multiple accordion items in one widget
- ✅ Customizable colors and fonts
- ✅ HTML support in titles and content
- ✅ Inline content editing
- ✅ Responsive on all devices
- ✅ Accessibility support (ARIA)
How to Use¶
1. Add Widget¶
- Open Page Builder
- Drag Accordion | PapaThemes widget to the page
- Widget displays with 2 default items
2. General Configuration¶
In the Settings tab:
General¶
| Option | Description | Default |
|---|---|---|
| Border Color | Accordion border color | #858585 |
| Focus Color | Color when item is focused | #0759d5 |
Heading¶
| Option | Description | Default |
|---|---|---|
| Tag | HTML tag for heading (H1-H6, DIV) | H3 |
| Heading Color | Heading text color | #212121 |
| Background Color | Heading background | #f7f7f7 |
| Hover Color | Background on hover | #e1edfe |
| Typography | Font style (Default/Custom) | Default |
| Font Size | Desktop font size | 30px |
| Font Size (Mobile) | Mobile font size | 16px |
| Alignment | Content alignment | Left |
| Padding | Inner spacing | 10px 15px |
Body¶
| Option | Description | Default |
|---|---|---|
| Color | Body text color | #000000 |
| Background Color | Body background | #ffffff |
| Typography | Font style | Default |
| Alignment | Alignment | Left |
| Padding | Inner spacing | 10px 15px |
3. Managing Items¶
In the Items tab:
Adding New Items¶
- Click Add Item button
- Configure content for the new item
Configuring Each Item¶
| Option | Description | Default |
|---|---|---|
| Open by default | Expanded on page load | false |
| Title | Title (HTML supported) | Accordion Title |
| Body | Content (HTML supported) | Accordion Body |
Deleting/Reordering Items¶
- Drag and drop to reorder
- Click trash icon to delete
Usage Examples¶
FAQ Section¶
<!-- Title -->
<p><strong>How do I place an order?</strong></p>
<!-- Content -->
<p>You can order directly on our website by:</p>
<ol>
<li>Select products and add to cart</li>
<li>Fill in shipping information</li>
<li>Complete payment and confirm order</li>
</ol>
Product Specifications¶
Use accordion to display product specifications with sections like: - Detailed description - Technical specifications - Usage instructions - Warranty policy
Inline Editing¶
The widget supports WYSIWYG editing:
- Enable Edit Mode in Page Builder
- Click directly on title or content
- Edit text on the page
- Changes are saved automatically
Responsive¶
Widget automatically adjusts: - Desktop: Font size per Desktop settings - Mobile (< 800px): Font size per Mobile settings
Accessibility¶
Widget follows WAI-ARIA standards: - Uses role="button" for trigger - aria-expanded attribute for state - aria-controls links trigger to panel - Supports keyboard navigation
Notes¶
- Performance: Avoid using more than 10 items per accordion
- Content: Avoid overly long content in body, may affect UX
- HTML: Check HTML in title/body carefully to avoid display issues