Fade Tabs

Introduction

Fade Tabs is a powerful Joomla module that allows you to display content in a professional tabbed interface with smooth fade and slide transitions. This comprehensive module supports both category-based content and custom tabs, offering complete control over styling, layout, and behavior.

Fade Tabs has been completely redesigned for Joomla 4, 5, and 6, featuring 10 pre-built themes, vertical layout support, advanced customization options, and full accessibility compliance.

Installation

Downloading the Extension

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package from your account.

System Requirements

• Joomla Version: 4.x, 5.x, or 6.x
• PHP Version: 7.4 or higher
• jQuery: Automatically loaded by Joomla

Installing the Extension

To install the extension, log in to the backend of your Joomla website.

• For Joomla 4/5/6: Go to System > Install > Extensions. You can either drag and drop or browse for the file to install.

A success message will be displayed once the installation is complete. The module will appear in Content > Site Modules.

Content Source

Tab Content Source

Fade Tabs offers two content source options:

1. Joomla Categories (Articles)

• Select Categories: Choose one or more Joomla categories. Each category will become a separate tab.
• Articles Per Tab: Set the number of articles to display in each category tab (default: 5).
• Filter by Tags: Optionally filter articles by specific tags.
• Featured Articles: Choose to show all articles, only featured, or hide featured articles.
• Order Articles By: Sort by Published Date, Created Date, Modified Date, Ordering, Hits, or Random.
• Sort Direction: Choose Ascending or Descending order.
• Exclude Current Article: Automatically exclude the current article when viewing an article page.
• Article Images: Display intro or full images from articles with captions.

2. Custom Tabs (Manual Content)

• Subform Interface: Create unlimited custom tabs with your own content.
• Tab Title: Set a unique title for each tab.
• Tab Icon: Add Font Awesome icons to tab titles (e.g., fa-home, fas fa-user).
• Tab Content: Use the rich text editor to add HTML content, images, links, and more.
• Full HTML Support: Complete control over tab content without needing to create articles.

Appearance Styling

Tab Style Selection

Choose from 10 pre-built professional themes:

• Classic: Traditional tab design with clean lines
• Modern: Contemporary style with subtle shadows
• Material: Material Design inspired tabs
• Rounded: Tabs with rounded corners
• Bordered: Tabs with distinct borders
• Flat: Minimalist flat design
• And 4 more professional styles

Theme Color

Customize the accent color used across all tab styles. This color is applied to active tabs, borders, and highlights using CSS variables for easy theming.

Custom Styling Mode

Enable Use Custom Styling for complete design control:

• Tab Colors: Background, active background, text, active text, and hover colors
• Typography: Font size, font weight, padding, and spacing
• Borders: Border width, color, and radius
• Content Styling: Background color, text color, padding, font size, and line height
• Layout Control: Minimum tab width and spacing between tabs

Layout Options

• Horizontal Layout: Traditional top-tab navigation (default)
• Vertical Layout: Sidebar navigation with customizable tab width and content area width

Behavior Settings

Transition Effects

• None: Instant tab switching with no animation
• Fade: Smooth fade in/out effect
• Slide: Elegant slide transition between tabs
• Both: Combines fade and slide effects for enhanced visual appeal

Transition Speed

Control the animation timing:

• Slow: 600ms - Smooth and elegant
• Normal: 400ms - Balanced and professional (default)
• Fast: 200ms - Quick and snappy

URL Hash Navigation

Enable to add tab numbers to the URL (e.g., #jx-tab-123-1). This allows:

• Users to bookmark specific tabs
• Direct linking to tab content
• Shareable URLs that open specific tabs
• Browser back/forward button support

Note: The module uses smart scroll management to prevent page jumps when switching tabs.

Advanced Settings

Performance Optimization

• Use Minified Assets: Enable to load minified CSS and JavaScript files for better performance. The module automatically falls back to regular files if minified versions are not available.

Font Awesome Integration

• Load Font Awesome: Enable to automatically load Font Awesome icons library. Turn OFF if your template already loads Font Awesome to avoid duplicate loading.
• The module automatically detects if Font Awesome is already loaded and won't load it twice.

Module Class Suffix

Add a custom CSS class to the module container for additional styling. For example, my-custom-tabs will add the class mod-fadetabs my-custom-tabs to the module container.

Accessibility Features

Fade Tabs includes comprehensive accessibility support:

• ARIA Labels: Full ARIA support for screen readers
• Keyboard Navigation: Arrow keys (←/→, ↑/↓), Home, and End keys
• Tab Index Management: Proper focus management for keyboard users
• WCAG 2.1 Compliant: Meets accessibility standards

Features

Core Features

• Dual Content Sources: Display content from Joomla categories or create unlimited custom tabs
• 10 Pre-Built Themes: Professional styles ready to use or fully customizable
• Smooth Transitions: Fade, slide, or combined effects with adjustable speed
• Layout Versatility: Horizontal (top tabs) or vertical (sidebar) layouts
• Complete Style Control: Customize every visual aspect or use pre-built themes
• Smart Content Management: Advanced sorting, filtering, and organization options
• URL Hash Navigation: Bookmarkable and shareable tab links
• Full Accessibility: ARIA labels, keyboard navigation, and screen reader support
• Responsive Design: Perfect display on all devices and screen sizes
• Font Awesome Integration: Add icons to tab titles with automatic library detection
• Article Image Display: Automatic image handling with caption support
• Content Plugin Support: Full support for Joomla content plugins
• Performance Optimized: Optional minified assets for faster loading
• Joomla 4/5/6 Compatible: Built with modern Joomla APIs
• Security Hardened: XSS protection and input validation

FAQ

General Questions

• What transition effects are available?

  • You can choose from fade, slide, both (combined), or none (instant switching). Adjust the speed with slow, normal, or fast options.

• Can I create custom tabs without using articles?

  • Yes! Select "Custom Tabs" as the content source and use the subform interface to create unlimited tabs with your own content, icons, and HTML.

• How many styling themes are available?

  • Fade Tabs includes 10 pre-built professional themes. You can also enable custom styling mode for complete design control.

• Can I use vertical tabs instead of horizontal?

  • Yes! Select "Vertical" layout in the Appearance settings. You can customize the tab navigation width and content area width.

Content & Configuration

• Can I display content from multiple categories?

  • Yes, you can select multiple categories. Each category becomes its own tab automatically.

• How do I change the transition speed?

  • Go to Behavior Settings and adjust the "Transition Speed" option (slow, normal, or fast).

• Can users bookmark specific tabs?

  • Yes! Enable "URL Hash Navigation" in Behavior Settings. Users can then bookmark or share links to specific tabs.

• Is the module accessible for keyboard users?

  • Yes! Full keyboard navigation is supported with arrow keys, home, and end keys. The module is WCAG 2.1 compliant.

Performance & Compatibility

• Which Joomla versions are supported?

  • Fade Tabs is fully compatible with Joomla 4.x, 5.x, and 6.x.

• Can I improve performance with minified files?

  • Yes! Enable "Use Minified Assets" in Advanced Settings. The module will automatically use minified CSS and JavaScript files if available.

• Will Font Awesome load twice if my template already has it?

  • No, the module automatically detects if Font Awesome is already loaded and won't load it again.

Troubleshooting

Common Issues

• Tabs Not Displaying

  • Ensure the module is assigned to a visible template position and published.
  • Check that you have selected categories (for category-based tabs) or created custom tabs.
  • Verify the module is assigned to the correct menu items or appears on all pages.

• Transitions Not Working

  • Check that jQuery is loaded (it should be automatic in Joomla 4/5/6).
  • Verify the transition effect is set correctly in Behavior Settings.
  • Clear your browser cache and Joomla cache.

• Content Not Updating

  • Clear Joomla cache (System > Clear Cache).
  • Verify the selected categories have published articles.
  • Check the article count and ordering settings.

• Styling Issues

  • Check if your template's CSS is overriding module styles. Use the Module Class Suffix to add custom styles.
  • Verify the theme color is set correctly if using pre-built themes.
  • If using custom styling, ensure all color values are valid CSS colors.

• Vertical Layout Not Displaying Correctly

  • Verify the tab width and content width values are set correctly (e.g., 200px, 20%, auto).
  • Check that your template has enough horizontal space for the vertical layout.
  • Test on different screen sizes to ensure responsive behavior.

• URL Hash Navigation Not Working

  • Ensure "URL Hash Navigation" is enabled in Behavior Settings.
  • Check browser console for JavaScript errors.
  • Verify the module ID is correct in the generated hash (#jx-tab-{id}-{index}).

Updates

Automatic Updates

Fade Tabs includes an integrated update server to keep your extension up-to-date with the latest features and improvements. Updates are available through Joomla's built-in Update Manager.

How to Get the License Key

• Go to the Download Section of our store.
• If you already have an account, log in. Otherwise, create a new account.
• Important: Create an account using the same email address you used when purchasing the extension. (This is the email address you provided in our store during purchase, not your PayPal email address.)
• Once logged in, you can find the License Key for the extension in your download history.

Latest Features

• Full Joomla 4, 5, and 6 compatibility
• Custom tabs with subform support
• 10 pre-built professional themes
• Vertical layout option
• Enhanced URL hash navigation
• Minified assets option
• Complete accessibility improvements
• Security hardening
• Smart scroll management
• And many more improvements

For the complete changelog, visit our documentation page.