The package downloaded from CodeCanyon includes several files and folders:
Contains the jQuery library and other scripts used in the examples.
Contains several examples that showcase some of the accordion's capabilities.
Contains the documentation.
Installing and instantiating Grid Accordion
1. Copying the required files
Copy the Grid Accordion script (jquery.gridAccordion.min.js) from the 'dist/js' folder to your 'js' folder. You will also need to copy the jQuery script (jquery-1.10.1.min.js) from the 'libs' folder, or you can download it from the official jQuery website .
From 'dist/css', copy grid-accordion.min.css and the 'images' folder into your 'css' folder.
2. Including the required files in the page
Once you have copied the files mentioned above, you will need to include them in the header of the HTML page:
3. Creating HTML markup
<body> tag, you need to specify HTML markup like in the example below:
<body> <div id="my-accordion" class="grid-accordion"> <div class="ga-panels"> <div class="ga-panel"> <img class="ga-background" src="path/to/image1.jpg"/> </div> <div class="ga-panel"> <img class="ga-background" src="path/to/image2.jpg"/> </div> <div class="ga-panel"> <img class="ga-background" src="path/to/image3.jpg"/> </div> <div class="ga-panel"> <img class="ga-background" src="path/to/image4.jpg"/> </div> <div class="ga-panel"> <img class="ga-background" src="path/to/image5.jpg"/> </div> </div> </div> </body>
This is one of the most basic accordions that you can create. In the "Modules" chapter you will learn how to add richer functionality to the accordion, which will require some additional HTML code.
The accordion's main DIV element needs to have the
grid-accordion class. Then, inside the main accordion container you create another DIV, which has the
ga-panels class. This DIV will be a container for the individual panel elements. The panel elements need to be DIV's that have the
ga-panel class. Inside the panels you can insert any HTML content. If you want to add a background image you need to add to it the
Please note that all class names are prefixed with
ga- in order to prevent CSS conflicts with other scripts from the page.
4. Instantiating the accordion
After including the required files in the header and creating the HTML markup, you will need to instantiate the accordion by adding the following code before the