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:
The script initializes a list (<dl> tag) with .accordion class. Also we need to setup an element (<dt> tag) with an active class (.active). This element will toggle drop-down panel also it defines which tag will define ‘accordion’ header title.
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 <dt> tag and set 11 style for correspondent <dd> tag.
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.