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.