- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
“Accordion”-3
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 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 ( tag) and applying .show() method for content element ( tag):
The rest of the coding makes ‘accordion’ panels to animate when panel titles ( tags) are clicked:
HTML
Below you can see general HTML script representation:
The ‘accordion’ is formed by a list ( tag) with .accordion class.
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.