Accordion Pro - Documentation

Accordion Pro is a powerful modular template that extends the Grav Editorial theme with advanced accordion functionality. Create beautiful, responsive accordion sections with multiple layout options, image support, and extensive customization features.

Overview

Key Features

• 🎯 Multiple Content Layouts - Position content above, left, or right of accordions
• 🖼️ Flexible Image Positioning - Choose from inside, left, or right image placement
• 🎨 Complete Color Control - Customize every aspect of the accordion appearance
• ⚡ Markdown Support - Rich content formatting with full markdown capabilities
• 🔧 Font Awesome Icons - Enhance titles with professional icons
• 📱 Fully Responsive - Perfect display on all devices
• 🎭 Smooth Animations - CSS3 transitions for opening/closing

Requirements

• Grav 1.7+
• Editorial Theme
• PHP 7.4+

Quick Start

Basic Configuration

1. Create a new modular page in your Grav admin
2. Select "Accordion" from the modular templates
3. Configure the basic settings in the Content tab
4. Add your accordion items in the Accordion Items tab
5. Customize colors in the Accordion Settings tab

Minimal Example

title: 'Features Overview'
content_position: top
open_first: true
accordions:
  -
    title: 'Core Features'
    content: 'Discover our powerful feature set...'
  -
    title: 'Advanced Options' 
    content: 'Explore advanced configuration...'

Configuration Options

Content Tab

Page Content Position

Control where your main page content appears in relation to the accordion items.

Open First on Load

Automatically expand the first accordion item when the page loads. Useful for highlighting important content.

open_first: true  # First item expanded
open_first: false # All items collapsed

Accordion Items

Each accordion item can be fully customized with the following options:

Title [required]

The clickable header text for the accordion item.

title: 'Frequently Asked Questions'

Icon

Add Font Awesome icons to enhance visual appeal.

icon: 'fa-rocket'
icon: 'fa-shield-alt' 
icon: 'fa-chart-line'

Tip: Use icons that represent the content category for better visual hierarchy.

Image & Positioning

Add images with flexible positioning options.

image: 'feature-preview.jpg'
image_alt: 'Dashboard feature overview'
image_position: 'left' # inside, left, right, none

Image Position Options:

• inside: Image displays above text content
• left: Image floats left, text wraps right (ideal for portraits)
• right: Image floats right, text wraps left (great for screenshots)
• none: No image displayed

Content (Markdown)

The main content area with full markdown support.

content: |
  ## Key Benefits

  - **Faster processing** - 2x performance improvement
  - *Easy integration* - Simple API endpoints
  - `Code support` - Syntax highlighting available

  [Learn more](/features)

Call-to-Action Links

Add actionable links with custom styling.

link_url: '/documentation'
link_text: 'Read Documentation'
link_class: 'button primary'

Accordion Settings (Style Tab)

Color Customization

Complete control over the accordion appearance:

Advanced Usage

Multi-column Layouts

Combine with Editorial's grid system for complex layouts:

content_position: top
accordions:
  -
    title: 'Design Features'
    image_position: 'left'
    content: 'Responsive design principles...'
  -
    title: 'Development Tools'  
    image_position: 'right'
    content: 'Comprehensive developer toolkit...'

Integration with Other Modules

Accordion Pro works seamlessly with other Editorial modular templates:

title: 'Product Overview'
sections:
  - header:
      title: 'Key Features'
      template: accordion
      accordions: [...]
  - spotlights:
      title: 'Use Cases'  
      template: spotlights
      # Spotlights configuration...

Custom CSS Classes

Extend functionality with custom CSS:

link_class: 'button large primary'

Available utility classes:

• button primary|secondary
• large|small
• fit (full width)
• icon fa-* (icon buttons)

Examples & Use Cases

FAQ Section

title: 'Frequently Asked Questions'
content_position: top
open_first: false
accordions:
  -
    title: 'What is your support policy?'
    icon: 'fa-life-ring'
    content: |
      We offer **24/7 premium support** for all enterprise customers...
    link_url: '/support'
    link_text: 'Contact Support'

Product Features

title: 'Feature Overview'
content_position: 'left'
open_first: true
accordions:
  -
    title: 'Advanced Analytics'
    icon: 'fa-chart-bar'
    image: 'analytics-dash.jpg'
    image_position: 'right'
    content: 'Real-time analytics dashboard...'

Documentation Sections

title: 'Getting Started Guide'
content_position: 'right' 
open_first: true
accordions:
  -
    title: '1. Installation'
    icon: 'fa-download'
    content: 'Step-by-step installation guide...'
  -
    title: '2. Configuration'
    icon: 'fa-cogs'
    content: 'Initial setup and configuration...'

Troubleshooting

Common Issues

Accordions not animating

• Ensure JavaScript is enabled
• Check for console errors
• Verify jQuery dependency (if required by theme)

Images not loading

• Confirm image path is correct
• Check file permissions (644 recommended)
• Verify image exists in page folder

Markdown not rendering

• Ensure proper markdown syntax
• Check for special character encoding
• Verify markdown processor is active

Color changes not visible

• Clear Grav cache (bin/grav clear-cache)
• Hard refresh browser (Ctrl+F5)
• Check color format (hex codes required)

Performance Tips

• Optimize images before upload
• Use appropriate image sizes
• Limit accordion items to 10-15 per page
• Combine with Grav's caching mechanisms

Support

Documentation

• Editorial Theme Docs
• Grav Official Documentation

Premium Support

For dedicated support, please contact us through:

• Email: support@example.com
• Help Desk: https://example.com/support