Categories

“Accordion”-3

Template-help.com Team November 15, 2010
Rating: 5.0/5. From 2 votes.
Please wait...

This is an “AccordionScript. 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:

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:

HTML
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:

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

This entry was posted in Accordion and tagged accordion, jQuery. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket