The S5 Horizontal Accordion module is demonstrated at the top of this page.

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.

The following is a quick list of features that are included with the module:

• Set the height and width of the module
• Vertical text for slide titles (not images)
• Give each active slide a unique look, see below for more details
• Onclick or Onmouseover trigger methods
• Auto cycle or manual for transition
• Set slide transition speed
• Set the default slide to be open
• Set your own border colors and sizes around the module
• Compatible with IE7+, Firefox, Opera 10.5+, Safari, Chrome

Create your own unique active slides

Creating your own unique active slides is easy! Each slide has it's own unique background image found in modules/mod_s5_horizontal_accordion/images/ named slide1.png, slide2.png, slide3.png etc. These are the images pulled for each slide on active state. Since each slide pulls it's own unique image this means that you can have a different look for each slide if desired. A PSD file of the default slide images is included to make creating your own unique slides that much easier!

Please note this feature is optional, the default slide images will appear like the slides shown on the module at the top of this page.

This is an example of the default style:



This is an example of a custom active slide:




How to setup the modules

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

<positions>

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

<position>s5_ha_1</position>
<position>s5_ha_2</position>
<position>s5_ha_3</position>
<position>s5_ha_4</position>
<position>s5_ha_5</position>
<position>s5_ha_6</position>
<position>s5_ha_7</position>
<position>s5_ha_8</position>
<position>s5_ha_9</position>
<position>s5_ha_10</position>

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 that you desire.

6. Publish any module that you wish to the s5_ha_x positions that you created above. Publish them to all pages. 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. The slides will not show until a module is published to the associated slide.

7. Finally edit any parameters desired in the backend of the S5 Horizontal Accordion module such as height, width, speed, etc. and be sure to change the slide's titles in the backend as well.

Code used for this demo

The following is the code used to create the custom html modules used on this demo page: