Key Features

Multiple Accordion Support

Create an unlimited number of accordion items with individual titles and rich content. Each accordion can be configured independently with custom open/close states, making it perfect for organizing large amounts of content in a compact, user-friendly format. Easy setup through the backend allows you to add titles and content quickly and publish to any module position or article.

10 Predefined Style Presets

Choose from 10 professionally designed style presets to instantly match your website's aesthetic:
- Default: Classic dark theme with green accents
- Modern: Clean, minimalist design with blue highlights
- Minimal: Borderless, text-focused design
- Dark: Dark theme perfect for modern websites
- Colorful: Vibrant gradient styles
- Gradient: Beautiful gradient backgrounds
- Rounded: Soft, rounded corners design
- Flat: Flat design with solid colors
- Outline: Outlined style with transparent backgrounds
- Elegant: Sophisticated design with shadows

Each preset can be customized with your own theme color for seamless brand integration.

Theme Color Customization

Apply your brand color to any predefined style while maintaining the style's professional design structure. This feature allows you to quickly match your website's color scheme without losing the polished look of the predefined styles. Perfect for maintaining brand consistency across your site.

Joomla Articles Integration

Display Joomla articles directly in accordion format with automatic content updates. This powerful feature allows you to:
- Filter articles by category
- Control featured article display
- Set custom ordering (by date, hits, ordering, or random)
- Display article images (intro or full)
- Trigger content plugins for custom fields and enhancements
- Automatically update when new articles are published

Perfect for creating dynamic FAQ sections, product information, or news displays that stay current with your content.

Shareable URL Anchors

Each accordion item gets a unique ID (e.g., #jx-accordion-1) for direct linking. This feature enables:
- Deep Linking: Share specific accordion items with direct URLs
- Automatic Opening: URLs automatically open the correct accordion item on page load
- SEO Benefits: Improves user experience and search engine optimization
- Bookmarkable: Users can bookmark specific accordion sections

Ideal for FAQ pages, documentation, or any content where users need to link to specific sections.

Advanced Typography Controls

Complete control over text styling for perfect typography:
- Font Size: Customize accordion title font size
- Font Weight: Control text weight (100-900, normal, bold)
- Text Transform: Uppercase, lowercase, capitalize, or none
- Line Height: Adjust spacing between lines
- Letter Spacing: Fine-tune character spacing

Typography options are available for all predefined styles, not just custom, ensuring consistent branding across all design choices.

Flexible Display Options

Customize accordion behavior to match your needs:
- Multiple Open Support: Choose whether multiple items can be open simultaneously or only one at a time
- Icon Alignment: Position expand/collapse icons on the left or right side
- Arrow Indicator: Show a visual arrow indicator below active accordion items for better user guidance
- Individual Tab Control: Set each tab to open or close on page load

Responsive Design

Fully responsive design that adapts beautifully to all devices:
- Mobile Optimized: Perfect display on smartphones with touch-friendly interactions
- Tablet Compatible: Optimized spacing and sizing for tablet devices
- Desktop Ready: Full-featured display on desktop screens
- Flexbox Layout: Modern CSS flexbox implementation ensures consistent display
- Touch Friendly: Optimized for touch interactions with smooth animations

Individual Tab Control

Set each accordion tab to open or close upon page load. This flexible interaction allows each accordion item to have unique open/close settings, giving you complete control over the initial state of your accordion. Perfect for highlighting important content or creating progressive disclosure interfaces.

Backend Management

Effortlessly manage accordion content through an intuitive backend interface:
- Slide Management: Add, remove, and sort accordion slides with drag-and-drop functionality
- Visual Editor: Use Joomla's built-in editor for rich content creation
- Easy Organization: Reorder items with simple drag-and-drop
- Quick Editing: Edit titles and content directly in the backend
- Bulk Operations: Manage multiple accordion items efficiently

Color Customization

Full color control for complete design integration:
- Custom Colors: Set colors for closed tabs, open tabs, text, and arrow indicators
- Theme Color Override: Apply brand colors to predefined styles
- Brand Matching: Perfectly match your website's branding and color scheme
- RGBA Support: Use transparency for modern design effects

Modern Joomla Compatibility

Fully compatible with the latest Joomla versions:
- Joomla 4, 5 & 6 Support: Complete migration to modern Joomla platform
- Modern PHP 8.0+: Updated codebase with modern PHP syntax
- WebAssetManager: Uses Joomla's native asset management for optimal loading
- Future-Proof: Built with latest web standards for long-term reliability

Optimized Performance

Lightweight and fast implementation:
- Efficient JavaScript: Optimized event handling with proper cleanup
- Smooth Animations: CSS transitions for fluid expand/collapse animations
- Minimal DOM Queries: Efficient element selection and manipulation
- Asset Optimization: Proper use of WebAssetManager with defer attributes
- No jQuery Dependencies: Uses native JavaScript where possible

Enhanced Security

Built with security best practices:
- Input Sanitization: All user input properly sanitized with htmlspecialchars()
- XSS Prevention: Comprehensive output escaping
- Access Control: Respects Joomla's access control system
- Safe Content: Article content processed through Joomla's content preparation

Use Cases

• FAQ Sections: Create comprehensive FAQ pages with organized, searchable content
• Product Information: Display product details, specifications, and features
• Documentation: Organize documentation and help content
• Event Information: Show event details, schedules, and information
• Service Pages: Present services with expandable details
• News & Articles: Display article summaries with expandable full content
• Testimonials: Organize customer testimonials and reviews
• Pricing Tables: Show pricing tiers with expandable feature lists
• Course Content: Organize educational content and lesson materials
• Portfolio Items: Display project details and descriptions

Technical Details

Requirements

• Joomla Version: 4.x, 5.x, or 6.x
• PHP Version: 8.0 or higher
• Module Type: Site Module
• License: GNU/GPL v2 or later
• Update Server: Automatic updates supported via Joomla Update Manager

Installation

1. Install the module through Joomla's Extension Manager
2. Navigate to Modules → Responsive Accordion
3. Choose content source (Slides or Joomla Articles)
4. Configure style preset and colors
5. Add accordion items or configure article filters
6. Set display options (multiple open, icon alignment, arrows)
7. Assign to a module position and publish

Customization Options

General Settings
- Multiple accordion open (allow multiple items open simultaneously)
- Collapse icon alignment (left or right)
- Accordion arrow indicator (show/hide)
- URL anchors (enable shareable links)

Styling Settings
- Style preset (10 predefined styles or custom)
- Theme color (for predefined styles)
- Typography (font size, weight, transform, line height, letter spacing)
- Custom colors (for custom style: closed tab, open tab, text colors)

Content Settings
- Content source (Slides or Joomla Articles)
- Article filtering (category, featured status, ordering)
- Image display options
- Plugin events triggering

Advanced Settings
- Module class suffix for custom CSS
- Additional CSS for advanced styling

Why Choose Responsive Accordion Module?

1. Professional Design: 10 beautiful predefined styles plus full customization
2. Easy to Use: Simple backend interface for content management
3. Flexible Content: Support for both custom slides and Joomla articles
4. Responsive: Perfect display on all devices and screen sizes
5. SEO Friendly: Shareable URLs with automatic deep linking
6. Modern Technology: Built with latest web standards and Joomla best practices
7. Well Optimized: Lightweight code with efficient asset loading
8. Regular Updates: Continuously updated for compatibility and security
9. Typography Control: Complete text styling options for brand consistency
10. Multiple Instances: Deploy multiple accordions on a single page

Getting Started

1. Install the module through Joomla's Extension Manager
2. Navigate to Modules → Responsive Accordion
3. Choose a style preset or create a custom style
4. Select content source (Slides for custom content or Articles for dynamic content)
5. Add accordion items or configure article filters
6. Customize colors, typography, and display options
7. Assign to a module position and publish
8. Enjoy beautiful, responsive accordions on your website!

Transform your content organization with Responsive Accordion. Perfect for any Joomla website that needs organized, collapsible content sections with professional styling and extensive customization options.

Support

For support, documentation, and updates, please visit:
- Support: https://support.joomlax.com
- Store: https://joomlax.com
- Documentation: https://joomlax.com/documentation/responsive-accordion

Version History

The module has been continuously updated to support the latest Joomla versions. Version 1.6 introduces Joomla 6 support, 10 predefined style presets, theme color customization, URL anchors, Joomla articles integration, advanced typography controls, flexbox layout, and complete JoomlaX branding update.