How to Set Up

  1. Double Click to Install
  2. Drag & Drop the cleanAccordion Container stack
  3. Drag & Drop the cleanAccordion Inner stack – Drop as many of these as you want, they will count as each Accordion tab
  4. Give your Accordion Inner a title in the top section (feel free to wrap it in header tags)
  5. Give your Accordion Inner a description – for this you need to drag a default Stack section (i.e. HTML, Text, Columns, etc.)
  6. Select the cleanAccordion Container element for customization options – make yours look sweet!

I want those cool dashed lines in the demo

  • Navigate to your Page Inspector
  • Go to Header » CSS

Insert this awesome code:

1
dl.accordion {border-style: dashed;}

Setting tabs as links

Click on the individual tab that you want to edit. Switch the default Slider option to “Link On (Slider Off).” Then in the URL Option field enter the URL you wish to link to. This will eliminate the sliding effect and instead use the link you wish to send users to.

Turning Text Shadow Off (v.1.4.9 and earlier)

Click on the individual tab that you want to edit. Switch the default Slider option to “Link On (Slider Off).” Then in the URL Option field enter the URL you wish to link to. This will eliminate the sliding effect and instead use the link you wish to send users to.Turning Text Shadow Off (v1.4.9 and earlier)

The easiest way to hide the Text Shadow in the headers is to assign the shadow a color the same as the background. If you wish to turn the text shadow off completely you can easily do so with the following Snippet, which can be inserted in the Edit Mode of RapidWeaver under Page Info > Header > CSS

1
dl.accordion dt a {text-shadow: none !important;}

Setting a Fixed Height (v1.5.0 and earlier)

Some users desire to set a fixed width to their accordion, which you can easily do so with the following Snippet – insert in the Edit Mode of RapidWeaver under Page Info > Header > CSS

1
dl.accordion dd {height: 300px; overflow-y: scroll; overflow-x: hidden;}

Change Icon (+) Location & Size (version 2.0+)

Altering the location and size of the rotating icon can be done using the following jQuery code, which must be placed in RapidWeaver’s Edit Mode in the Page Info > Header > JavaScript section. This option was not built in as the option would be confusing to majority of users, though it is still very handy in certain styled websites, particularly those that use very large fonts inside the cleanAccordion.

The following code demonstrates the stack’s default settings. ‘Top’ adjusts the distance from the top, ‘left’ adjusts the distance from the left, and ‘font-size’ adjusts the font-size of the icon. You can replace these values for pixel, percentage, em, and ex values. Note that if you increase the distance from the top you must include a value, such as px.

1
2
3
4
5
6
7
$(document).ready(function() {
     $('.plusIcon').css({
          'top' : '0', 
          'left' : '12px', 
          'font-size': '200%'
     });
});

Change Icon (version 3.0+)

Tab icons use Font Awesome after the 3.0 version release. By default the icon will still display as the previous icon, a plus icon, which is an icon offered by Font Awesome. However, you now have access to a giant library of great and free icons.

To see the full list of icons please go the Font Awesome Website Here. Simply find the icon you wish to use and type it’s name in the field located in the customization options for the inner element. Previous versions required a single icon given to all accordion tabs, but with this version you can choose a different icon for each individual tab. Simple select the inner element and the field can be found on the right in the customization options section, which will display “icon-plus” by default.

Adding Icons (version 3.3.1+)

In this version of cleanAccordion the icons (generated by Font Awesome) were removed from the stack files as they were causing tremendous slow-downs when multiple cleanAccordions were displayed. Now the icon files are stored as a folder inside the install files titled “fonts” – simply unzip and then drag into your Resources section in RapidWeaver.

Next you must reference or call the stylesheet inside of the folder. Navigate to Page Info > Header > Header and enter the following:

1
<link href="%resource(fonts/font-awesome.css)%" rel="stylesheet" media="all" type="text/css" />

Alternatively, you can use the snippet file that is included in the install files, which is more useful if you are going to use cleanAccordion in several locations throughout out a website or with several different websites. Note that you need only add this code in pages that use cleanAccordion.

Need to update your product? Use the Order Lookup Form to download the latest version.