Accordion Module for Grav

Description

The Accordion module allows you to create interactive collapsible sections with rich content. Each accordion item can include Markdown-formatted text, images, icons, and call-to-action links.

Key Features

  • ✅ Collapsible accordions with smooth animations
  • ✅ Full Markdown support in content
  • ✅ Customizable icons (Font Awesome)
  • ✅ Images with three different positions
  • ✅ Call-to-action links/buttons
  • ✅ Complete color customization
  • ✅ Responsive design
  • ✅ Optional auto-open first item

Basic Configuration

Page Content Position

Controls where the main page content appears relative to the accordions:

  • Top: Content appears above the accordions
  • Left: Content appears on the left (5 columns) with accordions on the right (7 columns)
  • Right: Content appears on the right (5 columns) with accordions on the left (7 columns)

Open First Accordion on Load

  • Yes: The first accordion item opens automatically when the page loads
  • No (default): All accordions start collapsed

Accordion Items

Each accordion item consists of the following elements:

Required Fields

Accordion Title

Required field - The clickable header text that users see.

title: "What is this module?"

Optional Fields

Icon (Font Awesome)

Add a Font Awesome icon before the title. Use the appropriate prefix:

  • fa or fas for solid icons
  • far for regular icons
  • fab for brand icons

Examples:

icon: "fa fa-rocket"           # Solid rocket icon
icon: "far fa-chart-bar"       # Regular chart icon
icon: "fab fa-github"          # GitHub brand icon

Accordion Image

Upload an image to enhance your content. Supported formats: JPG, PNG, GIF.

image: my-image.jpg

Image ALT Text

Important for accessibility and SEO. Describe what the image shows.

image_alt: "Diagram showing the module workflow"

Image Position

Controls where the image appears within the accordion:

  • Inside (default): Image displays above the text content
  • Left: Image floats to the left (5 columns) with text wrapping on the right (7 columns)
  • Right: Image floats to the right (5 columns) with text wrapping on the left (7 columns)
image_position: inside  # or 'left' or 'right'

Content (Markdown)

The main content of the accordion item with full Markdown support:

  • Bold text with **bold**
  • Italic text with *italic*
  • Bullet points and numbered lists
  • Links and embedded images
  • Code blocks and inline code
  • Headings and blockquotes

Example:

content: |
  This is **bold** and this is *italic*.

  - First bullet point
  - Second bullet point

  [Link text](https://example.com)

Link URL

Optional call-to-action link. Can be relative (/page) or absolute (https://...).

link_url: "/contact"
# or
link_url: "https://example.com"

Link Text

Text displayed on the button. Defaults to "Learn more" if empty.

link_text: "Get Started"

Link CSS Class

Additional CSS classes for button styling.

Common classes:

  • primary - Primary button style
  • secondary - Secondary button style
  • large - Larger button
  • small - Smaller button
  • fit - Full-width button
link_class: "primary large"

Color Customization

The module provides extensive color customization options:

Default State Colors

  • Default Background (#f7f7f7): Background color for inactive accordion titles
  • Default Text (#636363): Text color for inactive titles
  • Border Bottom (#e5e5e5): Border color between accordion items

Active State Colors

  • Active Title Background (#fafafa): Background when accordion is open
  • Active Title Text (#2e3438): Text color when accordion is open
  • Active Content Background (#ffffff): Background for expanded content
  • Active Content Text (#636363): Text color in expanded content

Hover Colors

  • Hover Title Background (#fafafa): Background when hovering over title
  • Hover Title Text (#f56a6a): Text color when hovering

Container

  • Accordion Container Background (#ffffff): Overall background for the entire accordion section

Complete Example

title: Accordion Module
'@extends': default

form:
  fields:
    header.content_position:
      default: top

    header.open_first:
      default: 1

    header.accordions:
      - title: "Getting Started"
        icon: "fa fa-rocket"
        image: rocket.jpg
        image_alt: "Rocket launching into space"
        image_position: left
        content: |
          Welcome to the **Accordion Module**!

          This module makes it easy to create collapsible content sections.

          - Easy to configure
          - Fully customizable
          - Mobile responsive
        link_url: "/documentation"
        link_text: "Read the Docs"
        link_class: "primary"

      - title: "Advanced Features"
        icon: "fa fa-cog"
        content: |
          Learn about advanced configuration options and customization.
        link_url: "/advanced"
        link_text: "Learn More"

Technical Details

Animation System

The module uses CSS Grid for smooth height animations:

  • Transition duration: 0.45s with cubic-bezier easing
  • Opacity transition: 0.4s
  • Icon rotation: 0.3s

Responsive Behavior

  • Desktop: Two-column layouts for left/right positions
  • Medium screens (tablets): Maintains two-column layout
  • Small screens (mobile): Stacks content vertically (12 columns each)

JavaScript Behavior

  • Only one accordion can be open at a time (auto-close others)
  • Smooth toggle animation
  • Optional first-item auto-open on page load
  • No external dependencies required

Best Practices

Content Organization

  1. Use clear, descriptive titles - Help users find information quickly
  2. Break long content into multiple accordions - Keep each section focused
  3. Add relevant icons - Improve visual hierarchy and scannability
  4. Use markdown formatting - Make content easier to read
  5. Include CTAs when needed - Guide users to next steps

Image Usage

  • Inside position: Best for hero images or diagrams
  • Left/Right position: Best for portraits or supporting visuals
  • Always provide meaningful ALT text for accessibility
  • Optimize images for web (compress before uploading)

Accessibility Tips

  • Use descriptive titles that work when read aloud
  • Provide ALT text for all images
  • Ensure sufficient color contrast (test with WCAG guidelines)
  • Keep content concise and scannable

Troubleshooting

Accordion doesn't open

  • Check that JavaScript is enabled
  • Verify the page slug is unique (used for ID generation)

Images not displaying

  • Confirm the image file exists in the page folder
  • Check file extension is .jpg, .png, or .gif
  • Verify the filename matches exactly (case-sensitive)

Styling issues

  • Clear Grav cache: bin/grav clear-cache
  • Check for CSS conflicts with theme styles
  • Verify color codes are valid hex values (e.g., #ffffff)

Support

For questions or issues with this module, please refer to the Grav documentation or community forums.