> For the complete documentation index, see [llms.txt](https://modernpress-io.gitbook.io/modernpress/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modernpress-io.gitbook.io/modernpress/widgets/accordion.md).

# Accordion

### **Introduction**

The **Accordion Widget** in **ModernPress** helps you display collapsible content in an organized and interactive way. It is ideal for FAQs, feature descriptions, and structured content. While all five layouts maintain a similar structure, they offer slight variations in styling and interaction effects.

GitBook integrations allow you to connect your GitBook spaces to some of your favorite platforms and services. You can install integrations into your GitBook page from the *Integrations* menu in the top left.

***

#### **Key Features:**

\
✅ 5 Unique Layouts with Style Variations\
✅ Expand/Collapse Content Smoothly\
✅ Multiple Open Modes (Single/Multiple Items)\
✅ Custom Icons for Open/Close States\
✅ Full Typography and Color Control

***

### Adding the Accordion Widget

{% stepper %}
{% step %}
Open your WordPress Dashboard.
{% endstep %}

{% step %}
Edit a page with **Elementor**.
{% endstep %}

{% step %}
Search for **"Accordion"** in the **ModernPress Widgets** panel.

<figure><img src="/files/OTk8PGsn6qSJNr4jDywH" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Drag and drop the widget into your section.
{% endstep %}

{% step %}
Add your accordion items and customize settings

<figure><img src="/files/lxEz936GWU61uy1BKzh2" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

***

### **Layouts Overview**

#### **Layout 1 - Standard Accordion**

📌 A clean, classic accordion with a simple open/close effect.\
🎨 Best for **FAQs, product descriptions, or general content**.

<figure><img src="/files/TQvfuaG3fwNRbXOkyX4t" alt=""><figcaption></figcaption></figure>

#### **Layout 2 - Bordered Style**

📌 Each accordion item has a subtle border for a structured look.\
🎨 Ideal for **professional and corporate designs**.

<figure><img src="/files/wD7IRrMcSHuvHLjlAyQ5" alt=""><figcaption></figcaption></figure>

#### **Layout 3 - Minimalist Style**

📌 A modern design with a focus on typography and spacing.\
🎨 Great for **minimalist websites and clean layouts**.

<figure><img src="/files/9pzPRpt8pZpdANU3mukC" alt=""><figcaption></figcaption></figure>

#### **Layout 4 - Boxed Style**

📌 Each accordion item is enclosed in a box for a card-like effect.\
🎨 Works well for **eCommerce product details or feature highlights**.

<figure><img src="/files/mS4w0uj8z8JlyVkSANKl" alt=""><figcaption></figcaption></figure>

#### **Layout 5 - Icon Accent Style**

📌 Features unique icons and animated transitions for open/close states.\
🎨 Perfect for **interactive and creative content sections**.

<figure><img src="/files/UJNfAsf86zEX4Hv5xzaN" alt=""><figcaption></figcaption></figure>

***

### **Customization Options**

#### **Content Settings**

📌 **Add Accordion Items** – Define title and content for each section.\
🔄 **Open Mode** – Set whether multiple items can be open at once.\
🎭 **Custom Icons** – Choose different icons for expanded/collapsed states.

#### **Style Settings**

🎨 **Typography** – Customize text size, color, and spacing.\
📏 **Spacing & Alignment** – Adjust padding, margins, and item height.\
🔲 **Border & Background** – Modify the border style and background colors.\
⚡ **Animation Speed** – Control the speed of open/close transitions.

<figure><img src="/files/nFpPr3SKFZT1nO7ltEPR" alt=""><figcaption></figcaption></figure>

#### **Advanced Features**

📱 **Mobile Optimization** – Ensure seamless performance on smaller screens.\
✨ **Hover & Click Effects** – Add animations to enhance interaction.

***

### FAQs

<details>

<summary>Can I have all accordion items closed by default?</summary>

Yes! In the **Content Settings**, set the default state to "Closed."

</details>

<details>

<summary>Can I change the default open item?</summary>

Yes! You can specify which item should be expanded initially.

</details>

***

### **Need Help?**

For support, contact us at <support@modernpress.com>.