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
Open your WordPress Dashboard.
Edit a page with Elementor.
Search for "Accordion" in the ModernPress Widgets panel.
Drag and drop the widget into your section.
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
Need Help?
For support, contact us at support@modernpress.com.
Last updated