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:

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

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

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.

$(document).ready(function() {
          '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:

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


v3.6.1 (Apr 3, 2014)

  • Minor CSS fix

v3.6.0 (Mar 26, 2014)

  • New theme added “Separated”
  • Tabs Stay Open option added (opening another tab will not close the others)
  • “Connect” option added for “Separated” theme if icon section & title section are connected
  • Font size control added for title (overrides theme font size & line-height)
  • Cleaned up CSS & JS coding
  • Improved customization options

v3.4.9 (Jan 20, 2014)

  • Display fix for icon & title
  • Customization icon size option changed from slider to number section

v3.4.7 (Jan 16, 2014)

  • Removed Icon Top & Icon Left Options (icons will fit automatically inline with the title now)
  • Title & Icons can now be moved to the right hand side

v3.4.1 (Jan 8, 2014)

  • Fixed IE8 Support Pseudo Command Support

v3.4.0 (Nov 21, 2013)

  • Supports the new Font Awesome 4.0.3 – note the html for this version changed, so it will not work with earlier versions. This annoyed me a bit so I created a free Font Awesome stack – you can find our main page.
  • Improved some CSS calls for browser compatibility
  • New shadow controls – this might be advanced for some users. The default displays 0 1px 1px – the first 2 numbers control x and y axis, the third is blur
  • Icon default position lowered slightly
  • Removes target=”_blank” from anchor tag (link)

v3.3.3 (Oct 29, 2013)

  • Group changed back to ’1LD Stacks’

v3.3.2 (Sept 5, 2013)

  • New Flat Icons Added

v3.3.1 (July 5, 2013)

  • Font Awesome is now stored separately as a folder, css file, and font files that can be added by dragging & dropping the folder into the Resources section of RapidWeaver. This change was made to avoid slowdowns from multiple calls to the files, which added tremendous slow-down when many cleanAccordions existed on a single page.
  • Some minor changes were made in the customization options (nothing was added or removed, simply improved from an interaction standpoint).

v3.2.0 (July 2, 2013)

  • SPARKLE ready

v3.1.4 (June 19, 2013)

  • Border Minimal Option for Container Theme (only a single border will display below Titles)
  • Container Theme Title Background Color Hover Fixed
  • Transparency Option fix that caused certain contained elements to display transparency
  • Transparency for Bars theme fix (Gradient Active colors displayed previously)

v3.0.0 (June 14, 2013)

  • New backend design
  • Transparent background option added
  • Tab highlight colors now available
  • Indenting fix for unordered lists inside some themes
  • Icon position now customizable
  • Icon Size now customizable
  • Gradient display improved when border radius is used (rounded corners)
  • Gradient for theme 1 can be turned on/off
  • Font Awesome used in place of text – for all available icons go here
  • Inner elements now control icon symbols – each tab can have unique icon
  • Snippet file removed (no longer serves purpose with new customization options)

v2.0.0 (March 20, 2013)

  • Removed margin option (no need – already built into Stacks)
  • Margin option for Theme 1
  • Right-site cutting off fix added (occurred only in some themes)
  • Fixed Height option (on/off)
  • Fixed Height Sizing (container and inner elements)
  • Links in the tabs will now open in a new tab in the browsers – using target=”_blank”
  • Clear formatting code added (occurred only in some themes)
  • Links now have a “selected” color option
  • Icon (on/off) added – displays the “+” and rotates to an “x” (only in modern browsers)
  • Icon color options added (color, hover color, selected color)
  • Animation Speed Fix (0 millaseconds now fully supported)
  • Re-organized backend & changed some defaults

v1.5.0 (February 19, 2013)

  • Tabs can open on “click” or “hover” (customization option)
  • Option to turn Text Shadow off for tab titles
  • Other minor fixes

v1.4.9 (January 28, 2013)

  • Adds greater support in Internet Explorer 9
  • Removes unnecessary files
  • 1px Margin added to right hand side of the container element – fixes a 1 px issue that occurred in some sizes during responsiveness

v1.3.8 (November 15, 2012)

  • Fixed re-open bug when closing first tab in Auto-open mode

v1.3.7 (October 18, 2012)

  • Backend control of cleanAccordion tab animation speed (ms)

v1.3.5 (November 12, 2012)

  • Unique customization for every accordion (no longer global controls)
  • Link option for tabs: Allows disabling of sliding effect with replacement of URL to wherever you want
  • Small border fix for the last tab in Theme2

v1.2.1 (September 21, 2012)

  • Margin fix for the appearance in the backend
  • Small detail addition for backend appearance when Container is created

v1.2.0 (November 15, 2012)

  • Moved Accordion Count option (New selection labels “first accordion”) – this sets the accordion class if there are more than one container on the page (global styling applied).
  • Added Support for older browsers added.
  • Internet Explorer Fixes – makes more presentable for older IE browsers (6+) though the functionality still has issues. IE9 keeps gradients, though border radius is only option for theme 2 in IE9 (part of IE’s gradient structure).
  • Sets padding & margins to zero for some theme issues effecting DT & DD calls.
  • Multi-containers first added (explained more above in 9/19 update).
  • Auto-open option available for first Accordion tab.
  • Removed font-size call inside description container
  • Bottom border added in description container for Theme 2
  • Clearfix added to the cleanAccordion container (caused conflicts in some themes)
  • Description container no longer allows for text entry, but instead is a container for additional stacks. So you can drag and drop whatever the heck you want in it without limitations.