- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
“Accordion”-2
November 15, 2010
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 <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.
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 <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:
CSS
You can find script related stylesheet in the main style.css file.