Easy Articles Accordion is a powerful Joomla 5 module that displays articles in an interactive accordion format. It combines the functionality of Joomla's core article display with modern accordion UI, offering extensive customization options for design, animations, and content filtering.
Key Features
- 📱 Fully responsive Bootstrap-based accordion
- 🎨 10+ beautiful presets
- 🎯 Custom design builder
- ✨ 4 animation effects
- 🔍 Advanced article filtering
- 📊 Multiple grouping options
- ⚡ AJAX pagination support
- 🌐 Multi-language ready
Installation & Basic Setup
Installation Steps
- Download the module package (
mod_easyarticlesaccordion.zip) - Navigate to Extensions → Manage → Install in Joomla administrator
- Upload & Install the package
- Enable the module in Extensions → Manage → Manage
- Configure the module in Content → Site Modules
Basic Configuration
Display Mode Selection
Normal Mode
Perfect for displaying a fixed set of articles from specific categories:
- Homepage featured articles
- Category-specific content blocks
- Sidebar article lists
Dynamic Mode
Automatically adapts content based on the current page:
- Shows related articles when viewing a category
- Displays articles from the same category when viewing an article
- Perfect for "Related Articles" sections
Quick Start
For a basic accordion:
- Set Mode to "Normal"
- Select your categories
- Choose "Bootstrap Default" for style
- Set article count (or 0 for all)
- Save and assign to a module position
Filtering Articles
The module provides comprehensive filtering options to display exactly the articles you need.
Article Count
- 0: Display all articles (no limit)
- 1-100: Limit the number of displayed articles
Featured Articles
| Option | Description | Use Case |
|---|---|---|
| Show | Include all articles | General content display |
| Hide | Exclude featured articles | Regular articles only |
| Only | Show only featured articles | Highlight important content |
Category Filtering
- Category Filtering Type
- Inclusive: Show articles FROM selected categories
- Exclusive: Show articles NOT IN selected categories
- Categories: Select one or multiple categories
- Include Subcategories: Include articles from child categories
- Subcategory Levels: How deep to traverse subcategories
Tag Filtering
Select specific tags to filter articles. Only articles with these tags will be displayed. Great for creating topic-specific accordions.
Author Filtering
- Author Filtering Type: Inclusive/Exclusive
- Authors: Select specific authors
- Author Alias Filtering: Filter by author aliases
Date Filtering
Off
No date filtering applied
Date Range
Specify exact start and end dates
Relative
Show articles from last X days
Excluded Articles
Enter article IDs (one per line) to exclude specific articles from display.
Ordering & Grouping
Article Ordering Options
| Order Type | Description | Best For |
|---|---|---|
| Article Order | Default Joomla ordering | Manual control |
| Featured Order | Featured articles first | Highlighting important content |
| Most Popular | By hit count | Trending content |
| Title | Alphabetical by title | Reference lists, directories |
| Created Date | Newest/oldest first | News, blogs |
| Modified Date | Recently updated first | Dynamic content |
| Random | Randomize order | Discovery, variety |
Article Grouping
Group articles to create organized sections within your accordion:
Grouping Options
- None: No grouping (default)
- Year: Group by year
- Month & Year: Group by month and year
- Author: Group by author name
- Category: Group by category
- Tags: Group by tags
Grouping Direction
- Ascending: A to Z, oldest to newest
- Descending: Z to A, newest to oldest
Design & Styling
Choose from three styling approaches to match your website's design perfectly.
1. Bootstrap Default
Uses your template's default Bootstrap styling. Best for consistency with your site design.
When to use: When you want the accordion to match your template's existing style.
2. Use Preset
Choose from 10 professionally designed presets:
🎨 Modern Flat
- Clean, minimalist design
- Subtle shadows and smooth corners
- Perfect for: Corporate sites, portfolios
🌈 Gradient Purple
- Eye-catching purple gradient
- Bold and vibrant
- Perfect for: Creative agencies, artistic sites
💙 Gradient Blue
- Professional blue gradient
- Cool and calming
- Perfect for: Tech companies, business sites
➖ Minimal Clean
- Ultra-minimalist design
- No borders, clean lines
- Perfect for: Blogs, news sites
🃏 Card Style
- Each item as a separate card
- Modern shadow effects
- Perfect for: E-commerce, product showcases
🌙 Dark Theme
- Dark background with light text
- Easy on the eyes
- Perfect for: Gaming sites, night mode
📱 Material Design
- Google Material Design inspired
- Clean with subtle shadows
- Perfect for: Modern web apps
🔮 Glassmorphism
- Trendy glass effect with blur
- Semi-transparent backgrounds
- Perfect for: Modern, stylish sites
💫 Neumorphism
- Soft UI with inset shadows
- Modern 3D effect
- Perfect for: Design-focused sites
⭕ Outline Style
- Clean borders, no fills
- Minimalist approach
- Perfect for: Documentation, tutorials
3. Custom Design
Full control over every design aspect:
Color Customization
| Setting | Controls |
|---|---|
| Header Background | Background color for closed accordions |
| Header Text | Text color for headers |
| Header Hover Background | Color when hovering |
| Active Header Background | Color for open accordion |
| Active Header Text | Text color for active state |
| Body Background | Content area background |
| Body Text | Content text color |
| Icon Color | Expand/collapse arrow color |
Layout Customization
- Border Color: Color of accordion borders
- Border Width: Thickness in pixels
- Border Radius: Rounded corners in pixels
- Header Padding: Space inside headers
- Body Padding: Space inside content area
- Transition Duration: Animation speed (e.g., 0.3s)
- Custom CSS Classes: Additional classes for styling
Animation Effects
Enhance user experience with smooth animations. You can enable multiple effects simultaneously.
✨ Smooth Transitions
What it does: Adds smooth, professional transitions when accordions expand/collapse
- Headers smoothly change colors
- Expand/collapse arrows rotate smoothly
- Content fades in when opened
- Height changes are animated instead of instant
Best for: Professional websites that want polished interactions
📏 Hover Scale Effect
What it does: Makes accordion items slightly grow and lift when you hover over them
- Entire accordion item scales up by 2% on hover
- Item lifts up 3px (appears to float)
- Shadow increases to create depth
- Smooth transition in and out
Best for: Modern, interactive designs
🌈 Hover Glow Effect
What it does: Creates an animated rainbow glow around accordion items on hover
- Animated gradient border appears on hover
- Soft glow shadow spreads around the item
- Gradient colors shift continuously
- Creates a premium, high-tech look
Best for: Tech websites, gaming sites, or modern portfolios
➡️ Slide In Animation
What it does: Accordion items slide in from the left when the page loads
- Items start invisible and off-screen to the left
- Each item slides in with a staggered delay
- Creates a cascading entrance effect
- First item appears first, then second, etc.
Best for: Landing pages or sections that need attention
💡 Pro Tips for Animations
- Don't overdo it - usually 1-2 animation effects are enough
- Consider mobile users - hover effects won't work on touch devices
- Test performance - if you have many accordions, use fewer animations
- Smooth Transitions + one other effect usually works best
Display Options
Accordion Behavior
- Open First Item: Automatically expand the first accordion on page load
- Yes: First item starts expanded
- No: All items start collapsed
Content Elements
Date Display
- Show Date: Enable/disable date display
- Date Field: Created, Modified, or Publish date
- Date Format: PHP date format (e.g., Y-m-d, F j, Y)
Metadata Display
- Show Category: Display category name with link
- Show Hits: Display article view count
- Show Author: Display author name
- Show Tags: Display article tags
Article Content Options
| Option | Description |
|---|---|
| Hide | No article content shown |
| Auto | Smart detection (intro or full) |
| Intro Text | Show introduction only |
| Full Text | Show complete article |
| Both | Show intro + full text |
Content Processing
- Intro Text Limit: Character limit for intro
- Fix Broken HTML: Auto-fix unclosed HTML tags
- Clean Intro Text: Remove HTML from intro
- Prepare Content: Process with Joomla plugins
Read More Options
- Show Read More: Display read more link
- Show Title in Read More: Include article title in link
- Read More Limit: Character limit for title in read more
Advanced Settings
Layout Options
- Alternative Layout: Choose custom template override
- Module Class Suffix: Add custom CSS classes for additional styling
Custom CSS
Add your own CSS rules directly in the module. Example:
/* Custom title styling */
#mod-easy-articles-accordion-{id} .accordion-button {
font-family: 'Georgia', serif;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Custom content styling */
#mod-easy-articles-accordion-{id} .accordion-body {
line-height: 1.8;
font-size: 16px;
}Caching Options
| Setting | Description | When to Use |
|---|---|---|
| Use Global | Use Joomla's global cache settings | Default choice |
| No Caching | Disable caching for this module | Dynamic content |
| Cache Time | Custom cache duration in seconds | Specific requirements |
Performance Optimization
Best Practices for Performance
- Limit article count - Display only necessary articles
- Enable caching - For static content
- Optimize images - Compress images in articles
- Minimize animations - Use fewer effects on pages with many accordions
- Test on mobile - Ensure smooth performance on all devices
Troubleshooting
Accordion not expanding/collapsing
Check: Bootstrap JavaScript is loaded
Solution: The module automatically loads Bootstrap, but check for conflicts with your template
Styles not applying
Check: No CSS conflicts with template
Solution: Use Custom Design mode or add !important to custom CSS
Articles not showing
Check: Article access levels and publishing status
Solution: Verify user permissions and article states
Animations not working
Check: Browser supports CSS3 animations
Solution: Update browser or disable animations for older browsers
Example Configurations
FAQ Section
Mode: Normal Categories: FAQ Category Grouping: None Preset: Minimal Clean Animation: Smooth Transitions Open First: No Show Date: No Show Author: No Show Category: No
Result: Clean FAQ accordion with smooth animations
Latest News Sidebar
Mode: Normal Categories: News Count: 5 Ordering: Created Date Descending Preset: Card Style Animation: Slide In Show Date: Yes Date Format: F j, Y Show Category: Yes
Result: Eye-catching news accordion with dates
Related Articles
Mode: Dynamic Show on Article Page: Yes Count: 10 Preset: Modern Flat Animation: Smooth Transitions Show Intro: Yes Intro Limit: 150
Result: Context-aware related articles
Product Categories
Mode: Normal Categories: All Product Categories Grouping: Category Ordering: Title Preset: Material Design Animation: Hover Scale Show Readmore: Yes
Result: Organized product listings by category
Team Member Bios
Mode: Normal Categories: Team Grouping: None Ordering: Custom Order Preset: Gradient Blue Animation: Hover Scale + Smooth Transitions Show Full Text: Yes Show Author: No
Result: Professional team member showcase