One of the biggest difference between the 1st and 2nd version of this module is that the 2nd version is completely powered by CSS3!  There is absolutely no JavaScript used to power this version of the module.  The 2nd version is also responsive ready.

This module contains up to 10 module positions that appear in a horizontal slide function so you can publish any of your favorite modules or custom html modules to one of the slides and keep your site clean and consolidated while giving it some eye candy.

How to setup the module:

The S5 Horizontal Accordion module allows you to publish up to 10 modules of any kind into slides. Modules must be published to the following positions, s5_ha_1, s5_ha_2, s5_ha_3, etc. up to s5_ha_10. If you are using this template or any Vertex framework template these module positions already exist, if you are using a different template then you will need to add these positions to your template by completing the following steps:

1. Edit the following file: templates/your_template/templateDetails.xml

2. Towards the bottom of the file you will find a section that begins with:


3. Under the section of the file add the following positions:


4. Save the file and these positions will not be available to publish to in the backend of any module.

5. Publish the S5 Horizontal Accordion module to any page and position on your site as you desire.

6. Publish any module that you wish to the s5_ha_x positions that you created above. Publish them to all pages. The slides will not show until a module is published to the associated slide. (NOTE: For Version 1.0 the modules must be in order, example: if s5_ha_3 is present then s5_ha_2, s5_ha_1 must also be present. If modules are published out of order an error message will show on the frontend of the site.)

7. Finally edit any parameters desired in the backend of the S5 Horizontal Accordion module

Code used for this demo:

The following is the code used to create the custom html modules used on the homepage. Below is just an example of the first one:

<span class="s5accordionicson ion-map"></span> <h3>Camping</h3> Quisque gravida mi nec ligula interdum vel malesuada elit <div style="clear:both;"></div> <a style="float:none" class="readon" href="/attractions/">Read More</a>