If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)



This is an “Accordion” Script. So-called “Accordion” is a drop-down panel that holds some additional content.

In order to make the script work, the index-#.html file with a gallery should contain these lines of HTML code:

The <head> section of the index-#.html file contains these lines of code that initialize the script functionality with basic values:

First we show the first ‘accordion’ element, setting .active class for header element (<dt> tag) and applying .show() method for content element (<dd> tag):

The rest of the coding makes ‘accordion’ panels to animate when panel titles (<dt> tags) are clicked:

Below you can see general HTML script representation:

The ‘accordion’ is formed by a list (<dl> tag) with .accordion class.
In order to add another ‘accordion’ element you will just need to add the following HTML code construction:

You can find script related stylesheet in the main style.css file.

"Accordion"-3, 3.7 out of 5 based on 3 ratings
  • Anonymous

    We are working on creating video tutorials for jQuey plugins. The tutorials will be available in the nearest future