Accordion Widget¶
The Accordion widget shows a list of expandable, collapsible sections. Shoppers click a heading to reveal or hide the content underneath. Use it for FAQs, product details, shipping and returns info, or anywhere you want to keep a page tidy.
Page Builder name: Accordion | PapaThemes — Version: 1.0.1
Add it to your page¶
- In Page Builder, open the widget panel and find Accordion | PapaThemes.
- Drag it onto the page where you want the accordion to appear.
- The widget starts with two sample items. Edit them in the settings panel and add more as needed.
Settings¶
Settings¶
General¶
| Option | What it does | Default |
|---|---|---|
| Border Color | The line around the whole accordion and between items. | #858585 |
| Focus Color | The highlight color shown when an item is selected or navigated to with the keyboard. | #0759d5 |
Heading¶
These options style the clickable title bar of each item.
| Option | What it does | Default |
|---|---|---|
| Tag | The heading level used for titles, which affects page structure for search engines and screen readers. Choose H1, H2, H3, H4, H5, H6, or DIV. | H3 |
| Heading Color | Text color of the title. | #212121 |
| Heading Background Color | Background color of the title bar. | #f7f7f7 |
| Heading Hover Color | Background color when a shopper hovers over the title. | #e1edfe |
| Typography | Default (theme font) or Custom; Custom reveals Font family, Weight, Size, Mobile size. | Default |
| Alignment | Aligns the title text left, center, or right. | Left |
| Padding | Inner spacing (padding) around the title — top, right, bottom, left. | 10px / 15px / 10px / 15px |
Body¶
These options style the content area that opens under each title.
| Option | What it does | Default |
|---|---|---|
| Color | Text color of the content. | #000000 |
| Background Color | Background color of the open content area. | #ffffff |
| Typography | Default (theme font) or Custom; Custom reveals Font family, Weight, Size, Mobile size. | Default |
| Alignment | Aligns the content text left, center, or right. | Left |
| Padding | Inner spacing (padding) around the content — top, right, bottom, left. | 10px / 15px / 10px / 15px |
Items¶
Each accordion section is an entry in the Items list.
- Add an item: open the Items list and choose to add a new entry.
- Remove an item: use the delete (trash) control on the entry you want to remove.
- Reorder items: drag entries up or down to change the order they appear on the page.
Options for each item:
| Option | What it does | Default |
|---|---|---|
| Open by default | When on, this section starts open when the page loads. | Off |
| Title | The heading text shoppers click. Type your text and format it with the visual editor. | Accordion Title |
| Body | The content shown when the section is open. Type your text and format it with the visual editor. | Accordion Body |
Edit text right on the page
You can click a title or content area directly on the page in Edit Mode and type your changes there. Your edits are saved with the page.
Tips¶
Keep it scannable
Use clear, short titles so shoppers can quickly find the section they need. Accordions work best when each section answers one question or covers one topic.
Match your brand
Leave Typography on Default to inherit your theme's font, or switch to Custom when a section needs to stand out.
- Open your most important section by default so shoppers see key info without clicking.
- Avoid very long content inside a single section; consider splitting it into multiple items.
- Pick a heading Tag that fits the page outline (for example, H2 or H3 under a main page title) for better accessibility and SEO.