Vertical Content Accordion

Display content in a clean, collapsible vertical accordion. Built for latest Joomla with modern standards - zero jQuery, pure vanilla JavaScript, CSS custom properties, and full accessibility out of the box.

Key Features

• Easy to use
• 6 Themes - Basic, Colorful, Bordered, Lined, Card, Striped
• 5 Icon Styles - Chevron, Plus/Minus, Triangle, Caret, Circle (left or right)
• Click or Hover - Choose how panels open
• Collapse Previous - One-at-a-time or allow multiple open
• Default Open Tab - Pre-expand any panel on page load
• Session Persistence - Remembers which panel was open across page navigations
• Smooth Scroll - Auto-scrolls to the opened header
• 3 Animation Speeds - Slow, Normal, Fast
• Auto Media Pause - Pauses YouTube, Vimeo, and HTML5 video/audio when panels collapse
• Full Keyboard Navigation - Enter, Space, and focus indicators
• WCAG Accessible - ARIA roles, aria-expanded, and screen-reader friendly
• Respects Reduced Motion - Honours user's OS accessibility setting
• Custom Colours - Title, icon, content, read more text, and hover colours
• Per-Theme Padding - Individual top and bottom padding for each theme
• Custom CSS - Built-in CodeMirror editor for custom styling
• Content Plugins - Optionally process content through Joomla plugins
• Two Editor Modes - Default editor or CodeMirror for iframe and script embeds
• Read More Links - Per-item links with customisable text, URL, and target
• Inherits Site Theme - Colours default to inherit and work with any template
• Multiple Instances - Use multiple accordions on the same page
• No jQuery - Pure vanilla JavaScript
• Joomla Web Asset Manager - Proper asset loading with automatic debug switching
• SVG Icons - Crisp at any size and inherit CSS colours
• XSS Protected - All output properly escaped
• Lightweight - Minimal CSS and JavaScript footprint

Technical

• Pure vanilla JavaScript - no jQuery dependency
• CSS custom properties for all theming
• Joomla Web Asset Manager integration
• Debug-aware asset loading (auto min/unmin switching)
• XSS-safe output
• Multiple instances per page
• Content preparation support (runs Joomla content plugins)
• Two editor modes: Default or CodeMirror (for embedding iframes/scripts)

Support

• Fast response support
• Configuration assistance