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

1

Open your WordPress Dashboard.

2

Edit a page with Elementor.

3

Search for "Accordion" in the ModernPress Widgets panel.

4

Drag and drop the widget into your section.

5

Add your accordion items and customize settings

---

Layouts Overview

Layout 1 - Standard Accordion

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

Layout 2 - Bordered Style

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

Layout 3 - Minimalist Style

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

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.

Layout 5 - Icon Accent Style

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

---

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.

Advanced Features

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

---

FAQs

Can I have all accordion items closed by default?

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

Can I change the default open item?

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

---

Need Help?

For support, contact us at [e-mail].