Hit enter after type your search item

3 Demos of jQuery accordion plug-in: rlaccordion

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:

 


(See the demos below for complete code and using different options).

Initiate the plug-in


 

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:

jQuery accordion default

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:


 

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:


 

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:


 

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.

This div height required for enabling the sticky sidebar