The rlaccordion – A jQuery accordion plug-in
With rlaccordion plug-in, you may create content accordions in your web pages quite easily. The plug-in is light weight solution with customization by using the options provided.
You may open one or more accordion on start up while Unicode plus and minus signs are used for accordions in collapsed or expand states that you may customize as well.
The rlaccordion accordion is simple to implement in a website. See the demos and its usage in the following section or by visiting the developer’s page.
Source Download plug-in demo
How to use rlaccordion plug-in on your website?
Download the plug-in from the above provided link and get the styles.css and rlaccordion.js files. You may refer the jQuery library from the CDN:
<script src=”//cdn.bootcss.com/jquery/1.12.4/jquery.min.js”></script>
<script src=”js/rlaccordion/rlaccordion.js”></script>
Include these files before the </body> tag.
Include CSS in the <head> section:
<link rel=”stylesheet” href=”css/rlaccordion/styles.css” />
Make sure you adjust the path as per your directory structure.
Using the markup
The first element is the div tag that specifies the ID that is used to initiate the accordion in the jQuery code.
The <h3> acts as the heading for the panels in accordion while next div contains the paragraphs or other content; acts the panel body. The simplest markup can be:
<div id="accordion-default"> <h3>The first panel</h3> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p> </div> </div>
(See the demos below for complete code and using different options).
Initiate the plug-in
<script>
$(function() {
$("#accordion-default").rlAccordion();
});
</script>
A demo of accordion with default settings
The accordion created with default settings will open the first panel on start up. Have a look by clicking the link or image below:
See online demo and code
A demo with collapsed accordions on start up
By using the childNumOptions as false, you may create the accordion with all panels collapsed on startup. See this demo:
See online demo and code
The script used for this demo:
$("#accordion-demo").rlAccordion('single', {
childNumOptions: false
});
A demo with opening a specific panel on start up
For that, use the childNum option where you may specify the number of the child element to be expanded on start up. In this demo, I have given the 3 value:
See online demo and code
The script:
$("#accordion-demo").rlAccordion('single', {
childNum: 3
});
Note that, the number start at zero.
Other important options
You may change the plus and minus signs by using the open and close options:
open: '+', close: '−'
The default is Unicode values.
The div as main container, h3 as a panel, etc. can also be changed by using the options. Read the full documentation on the developer’s page.