Responsive Accordion

Download

Downloading the Extension

Email : After purchasing the extension from our store, you will receive an email with the link to download the extension.

Store : You can also download the extension from the Downloads section of our store. If you are new to our store, then you have to first create an account using the same email address which you have used while purchasing the extension.

Click to download the extension package - ResponsiveAccordion_UNZIP.zip

Unzip the Package

• UNZIP the package ResponsiveAccordion_UNZIP.zip using any file unzipper or winrar.
• Upon unzipping the package you will find the following.
  • Joomla 4, 5 & 6 - Install the file mod_responsive_accordion_X.x.zip
  • ReadMe.txt file - This file has information about the current version of the extension.

Installation

After successful UNZIP of the file ResponsiveAccordion_UNZIP.zip you will find the module zip file and the ReadMe.txt file inside the folder.

• For Joomla 4, 5 & 6 install : mod_responsive_accordion_X.x.zip

Go to Extensions > Extension Manager and click on the Upload Package File Tab.

Click on browse to choose the correct installation file and click on "Upload and Install"

After successful installation

• Go to Content > Site Modules
• You will find Responsive Accordion listed. Click on it to configure.

Note: This module supports Joomla 4, 5, and 6 only. Support for Joomla 3.x has been discontinued.

General Settings

In this tab you can setup the following properties of the accordion.

• Multiple Accordion Open : Set it to "No" if you want only a single accordion to open at a time. Set it to "Yes" to allow multiple accordion items to be open simultaneously.
• Collapse Icon Align : You can set the collapse/expand icon (plus/minus) to the left or right side of the accordion title.
• Accordion Arrow : Option to show or hide the visual arrow indicator below active accordion items. The arrow provides a visual cue to users about which accordion is currently open.
• Enable URL Anchors : When enabled, each accordion item gets a unique ID (e.g., #jx-accordion-1) that can be used for direct linking. This allows you to share specific accordion items with URLs that automatically open the correct tab on page load. Perfect for FAQ pages and documentation.

Styling Settings

Style Preset

Choose from 10 professionally designed style presets or select "Custom" to create your own style:

• 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
• Custom: Create your own unique style

Theme Color

When using a predefined style (not Custom), you can apply your brand color to the active accordion items and arrows. This allows you to match your website's color scheme while maintaining the professional look of the predefined style.

Typography Options

These options are available for all style presets:

• Tab Font Size : Select the font size of accordion tab (e.g., 18px, 20px).
• Tab Font Weight : Select font weight (100-900, normal, bold).
• Tab Text Transform : Choose uppercase, lowercase, capitalize, or none.
• Tab Line Height : Enter line height (e.g., 1.5, 24px) or leave empty for default.
• Tab Letter Spacing : Enter letter spacing in pixels (e.g., 1, 2) or leave empty for default.

Custom Style Colors

When "Custom" style preset is selected, you can configure:

• Closed Tab Color : Set the background color of closed/inactive accordion tabs.
• Closed Tab Text Color : Select the color of the text in closed tabs.
• Open Tab Color : Set the background color of open/active accordion tabs.
• Open Tab Text Color : Select the color of the text in open tabs.

Content Settings

Content Source

Choose whether to use custom slides or Joomla articles as your content source:

• Slides: Create custom accordion items with your own titles and content
• Joomla Articles: Display Joomla articles directly in accordion format

Custom Slides

When "Slides" is selected, you can add custom accordion items:

• Title : Set the title of the accordion item.
• State : Select if you want the accordion to be open or closed on page load.
• Content : You can add HTML content to the accordion item using Joomla's editor.

You can add any number of accordions by clicking on the Add button (+). The accordions can be deleted and sorted by simply dragging the slides.

Joomla Articles

When "Joomla Articles" is selected, configure the following:

• Category : Filter articles by category. You can select multiple categories.
• Order Results : Choose how to order articles (Published Date, Created Date, Modified Date, Ordering, Hits, or Random).
• Order Direction : Select Ascending or Descending order.
• Show Images : Enable or disable image display in article content.
• Article Image : Choose to display intro image, full article image, or no image.
• Trigger Plugin Events : Enable to trigger content plugins for custom fields, voting, and other enhancements.
• Featured Articles : Choose to show all articles, only featured articles, or hide featured articles.
• Number of Articles : Set how many articles to display in the accordion.

Advanced

• Module Suffix : Add a suffix class to the module to add extra CSS and customize the module. This allows you to apply custom styling to this specific module instance.
• Additional CSS : Add custom CSS code to further customize the accordion appearance. This CSS will be added inline to the page.

Example: If you enter "custom-accordion" as the module suffix, the module wrapper will have the class "jx-responsive-accordion custom-accordion", allowing you to target it with custom CSS.

CSS Tips: Use the Additional CSS field to override specific styles or add animations. You can target accordion items using classes like .jx-rquestion, .jx-rtitle, and .jx-ranswer.

Troubleshooting

How to get the license key for the extension?

• Go to the Download Section of our store.
• If you already have an account then login or else create an account if you are new to our store.
• Create an account using the same email address which you have used while purchasing the extension. (This isn't your Paypal email address but the address which you have provided in our store while purchasing)
• Once you login to the Download section you can find the License Key for the extension.

Common Issues and Solutions

• Accordion not displaying: Check thoroughly that you have activated the module in an existing template position. Make sure the module is published and assigned to the correct menu items.
• Module not visible on page: If you are using Firefox or Google Chrome, right-click on your website and click on "View Page Source". In the source code, search for text like "accordion" or "jx-responsive-accordion". If you don't find the text, then it's confirmed that the module isn't activated on the page.
• Changes not reflecting: If Joomla cache is activated, try to clear it once after you make changes to the module parameter settings. Go to System > Clear Cache.
• Accordion not opening: Check browser console for JavaScript errors. Make sure jQuery is loaded on the page. The module uses jQuery for accordion functionality.
• Double-click required: This issue has been fixed in version 1.6. Make sure you are using the latest version of the module.
• Theme color not applying: Make sure you have selected a predefined style (not Custom) and entered a valid color value. Clear browser cache and Joomla cache after making changes.
• Articles not displaying: Check that you have selected "Joomla Articles" as content source, selected at least one category, and have published articles in those categories.
• URL anchors not working: Make sure "Enable URL Anchors" is set to "Yes" in General Settings. The accordion items will have IDs like #jx-accordion-1, #jx-accordion-2, etc.
• Styling not applying: Check if there are any CSS conflicts with your template. Use the Module Suffix to add custom CSS classes for more specific targeting. Check browser developer tools to see if CSS is being overridden.
• Icons not displaying: The module uses FontAwesome for plus/minus icons. Make sure FontAwesome is loaded on your site. The module will attempt to load it automatically if not already present.
• Adding module inside article: To add this module inside an article, go through the URL : https://docs.joomla.org/How_do_you_put_a_module_inside_an_article?