“Accordion”-2

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

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

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

The script initializes a list (

tag) with .accordion class. Also we need to setup an element (

tag) with an active class (.active). This element will toggle drop-down panel also it defines which tag will define ‘accordion’ header title.

HTML
Below you can see general HTML script representation:

It is possible to setup any panel active by default. You just need to set .active class for panel

tag and set 11 style for correspondent

tag.
In order to add another ‘accordion’ element you will just need to add the following HTML code construction:

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