How to set up Joomla Accordion
This is a step by step guide, designed to help you install the Qlue Joomla Accordion to your Joomla Website. Upon completing this Tutorial you will be able to Install, Setup and Modify the Extension to work just the way you want.
Install!
Before we can do anything else, you will need to install this Joomla Extension to your Joomla website. If you have not done this before, Click Here and follow the instructions on how to install a Joomla Extension to your website. Once the Extension has been installed, you may continue with the next part of the Tutorial.
Before We Continue...
As this Joomla Extension is going to use Article content from your Joomla Website, ensure you have a Category ready and you know what its called, as we will need that information to be able to set up the Extension correctly. If you are unsure how to add a Category to your Joomla Website please Click Here and follow the Joomla guide on how to do this. Once you know what Category you want to use, continue with this Tutorial.
Setup!
Now that we have the Extension installed, we can begin using it. Follow the instruction below carefully, to add the QLUE Accordion module to your website. This tutorial will go through setting up the Parameters for the QLUE Accordion. If you do not know how to Setup a Module Click Here and return to this page to setup the Accordion parameters.
- Use the drop down to find the Category of articles you wish to display in the Accordion.
- Select what order you wish the articles to be display in. For this Tutorial we will leave 'Article Order' selected.
- Specfiy the number of Articles in the Category you wish to display. For this Tutorial we shall set it to 3 as this is the number of Articles in our Category.
- Which Article would you like to show first. Default is at 0, which will show the first article when the Accordion is loaded, but for this Tutorial we will change this to 3.
- Check 'Yes' or 'No' to allow for the Read More button in the Article to work inside the Accordion. We will select no as we have added a Read More link ourselves in the article.
- Turn Hover 'On' or 'Off'. This will allow users to hover over the Accordion and display the information within them without having to click on it first. For this tutorial we will have Hover turned off.
- This option allows users the ability to close all the open items on the Accordion. For this tutorial, we are going to leave it turned off.
- Opactity 'On' or 'Off' will enable the article information to fade in and out when its being displayed on the Accordion. We are going to turn it on as it looks good!
- Adding a Module Class Suffix will allow you to easily add css styles to particular accordions. This will be explained further on in this Tutorial. For now we will leave it blank.
If you have setup the QLUE Accordion correctly, you should see an Accordion like the one on the overview page. If you wish to add some extra styling to the module, Follow the Modify! section of this Tutorial to see how it all works.
Modify!
If you wish to modify the look of your newly working QLUE Accordion, this Tutorial will guide you through and explain what needs to be changed to get your Accordion looking Amazing!! This tutorial involves editing CSS code. If you are unsure about how to do this, then please do not attempt this Tutorial as it could result in your Accordion not working anymore. Advanced Users Only!
By assigning individual Accordions with Module Class Suffixes, you can easily alter the look of your Accordions. As demonstrated on this page, you can have two accordions loading the same information but styled differently. Below is a brief guide as to what you need to change to make your Accordions look great. The code to the right hand side generates the look of the Accordion below;
- div.moduletable = this will change the look of the Accordion module. A border has been added here.
- h3 = this is title of the article and of each accordion panel. Size and color have been altered here.
- h3:hover = hover styling has been added to the h3. Color has been altered here.
- h4 = this will change how the h4 tags in the article look. Nothing has been altered here.
- p = this will change how the p tags in the article look. Size and spacing have been altered here.
You can alter the look of most HTML tags that appear within your articles. This is a great way to match your Accordion to the articles your displaying, or just match the look of your site.
This unique Joomla component checks your website for broken internal and external URLs and lists them for you to update in an easy to read report. Super fast scanning means no need to wait, even for fairly large websites. Comprehensive parameters allow you to select exactly what you need to scan.
Read More
Qlue Joomla Tooltip is a content plugin which will convert the plugin syntax into a tooltip. Qlue Tooltip can display any html content such as text, images and even other joomla modules (e.g. Login form, latest news modules, custom module). For this plugin to work you will need Joomla 1.5 and mootools 1.1.
Read More
This Joomla Module will display a collection of articles in an accordion. Qlue Joomla accordion is capable of loading all html articles such as text, images and even other modules. This Joomla Module can be used on any template that has Joomla 1.5 and mootools 1.11.
Read More
div.qaccordion div.moduletable{
border-top: none!important;
border: 1px solid #444;
}
div.qaccordion h3{
cursor: pointer;
margin: 0 0 5px 0;
padding: 5px;
border-top: 1px solid #444;
border-bottom: 1px solid #444;
background: #444!important;
color: #AFCA17;
}
div.qaccordion h3:hover {
background: #AFCA17;
color: #FFF;
}
div.qaccordion p{
width: 75%;
margin: 5px auto;
padding-bottom: 5px;
text-align: justify;
line-height: 1.5em;
}
All Done!
Congratulations! You have finished this Tutorial and now have QLUE Joomla Accordion working on your Joomla Website. If you wish to access more parameters for your QLUE Accordion or need some support with getting it working, purchase QLUE Accordion Pro and start using your new QLUE Accordion Extension like a Pro!
How do i open all elements in Qlue Accordion Pro?
To open all elements inside Qlue Accordion Pro you will need to set the option "Index to open" to *. This will open all the elements inside your accordion when the page first loads. Please note: To open all elements you must have the option "Open Multiple" set to yes, otherwise the first element will be loaded only.
How do I close all elements in Qlue Accordion?
To close all items inside Qlue accordion, you will need to set the option "Index to open" to -1. This will close all the items when the page first loads.
Qlue accordion does not work when there is more than 1 on a page
Please make sure that you have the latest version of Qlue Accordion installed on your site. If you have the latest version and Qlue Accordion still does not work this can be caused by a javascript conflict on your site. Please login and submit a ticket for us to help you solve any conflicts.
Joomla 
