Stacks4Stacks

Tabs and accordion layouts have proven to be an excellent method of breaking content up into smaller bitesized pieces. The ability for users to click and view content makes webpages more interactive and reduces overall clutter. Our Switcher stack makes light-work of this sometimes daunting task; by generating powerful accordion or tab layouts through a sleek user interface. No complicated code or configuration required! Just add a Switcher stack to your page, create however many panes you want, drop the content in, play with the settings, and publish. You can return at a later date and easily remove certain items, add new ones or change the order or items; without needing to delete and rebuild your tab or accordion layout each time. This stack is named Switcher, because when clicking through tabs or accordion you are switching between content.

Key features

• Phenomenal choice of style and colour settings; permitting you to build just any conceivable style of tabs or accordion
• Support for retina-display compatible Font Awesome Icons in tabs or accordion headers
• Custom built exclusively for RapidWeaver. Minimal source code to promote faster-loading webpages and smother animations
• Fully responsive; compatible with all major web browsers and different handheld devices. Tabs become accordions on smaller screens
• Compatibility with most RapidWeaver themes, ExtraContent containers and FreeStyle banners
• Really easy to setup. The only code you might need is the markup for individual Font Awesome Icons
• Multiple Switcher stacks can be safely used on the same webpage
• Audio and video is automatically paused when tab or accordion panels are toggled

The 'Switchr' stack was originally developed by Aaron Marquez of StackManiac. Now named Switcher.

Examples

Here are some live working examples of Switcher stacks with different settings applied. You can toggle between either an accordion or tabbed layout, then customise the styling of the generated layout. By default, tabs and accordion headings are a purple colour, but you can easily change their colour scheme in the stack settings. Do download and try the free demo version of Switcher yourself, to explore the choice of options available to you.

 
Default settings
A Switcher stack dragged and dropped into the page, configured with four titles and content panes. No style settings changed.
 

 
Default tabs
A Switcher stack dragged and dropped into the page, configured as tabs with four titles and content panes. No style settings changed.
 

 
Minimal accordion
An ultra-minimalist accordion with minimal styling applied. Ideal in instances where you need the functionality of an accordion, but want to keep maximum emphasis on your content. Applying 5px of left padding on the hovered state creates the subtle rollover effect. Transition speed reduced to 300ms. Heading padding set to 0px on all sides, except 5px left and right on the hovered state. Heading margin set to 0px on all sides. Heading border bottom set to 2px and black on static and hovered states. All heading fill states set to white (#FFFFFF). All heading text states set to tungsten (#333333). Content panel padding set to 0px on all sides, accept the bottom. 2px black bottom border applied to the content panel. Content panel fill changed to white (#FFFFFF).
 

 
Mock Bootstrap tabs
Tabs styled to look like Twitter Bootstrap tabs, with the addition of optional Font Awesome icons. Settings used: Transition speed set to 300ms. Tab vertical padding set to 10px for all states, tab horizontal padding 15px for all states. All tab margins set to 0px. Tab radius set to 4px on top left and top right corners, for all states. Tab border set to 1px on all sides. Silver bottom border colour applied on static state. Mercury border colour set on all hovered sides. Active border state colour set to silver on all sides, except bottom which is white. Static fill white, hovered fill mercury, active fill white. Static text Bootstrap blue, hovered text and active text tungsten colour. Content top margin set to -1px. Content border (top) 1px. Content top border set to silver colour. Content fill white. Auto width tabs and normalise icons enabled in the advanced settings.
 

 
Smart tabs
Based loosely on the Bootstrap tabs example above, but with the addition of some more padding, borders and general styling. Animation speed set to 300ms.
 

 
Professional accordion
Styled similar to the Bootstrap accordion, with a few additional enhancements. Settings used: Heading padding set to 10px left and right for all states. Heading margin set to 5px top on all states, 0px on other sides. Heading radius set to 4px for all states on all sides, except active where the bottom left and bottom right radius was set to 0px. Heading border set to 1px on all sides and silver colour for all states. Static and active fill #f5f5f5, hover fill #eaeaea. All text states #333333 (tungsten). Content panel has a bottom left and bottom right radius of 4px applied. Content border set to 0px on the top, 1px for the three other sides. Content border colour set to silver. Content fill set to white.
 

 
Switcher & TintStack
An example combining Switcher with our free TintStack (creating the tinted image background effects on the tab and accordion panels). This example also utilises style overrides. Added in version 2.2, style overrides permit you to select individual items in your Switcher stack, and apply bespoke colouring. This overridden colouring can take effect on tab, accordion and content titles, icons, borders and background fills. It opens-up opportunities of applying different colours to each tab or accordion item. The icons in this example were created by using the <i class="fa fa-caret-down"></i> Font Awesome Icon Markup, applying a -20px top margin on the icons, and selectively changing their colours so they're only visible on active items.
 

 
Nested accordion
This is a feature quite a few people requested and we've been able to build into Switcher as part of an update. As this example demonstrates, it is feasible to nest Switcher stacks within other Switcher stacks; to create a more complex nested accordion setup. The trick towards getting this to work is simply to ensure each and every Switcher stack in your page is allocated a unique name. That way, click events will not propagate and open / close actions will only take effect on that particular accordion. Please note that nested tabs are not supported; neither can you place accordions within tabs - this system is exclusively developed for accordions inside accordions.
 

 

Setup

To get Switcher stack working in your website, follow these instructions:

1. Once installed into Stacks 3, drag and drop a Switcher stack into your page
2. Click the blue '+' button to add your tab or accordion pages
3. Double click to enter titles for each pane. Drag and drop content into the content drop zone shown
4. In the stack settings, toggle between either an accordion or tab layout
5. Customise any further settings resented to you, like the theme, colours, styling etc.
6. Preview the page in RapidWeaver. Publish when ready.

Multiple Switcher stacks can be safely used on the same page. There is no limit to the number of items you can create within Switcher. Items added to your Switcher stack can be easily reordered, added or deleted. Switcher stack is compatible with Partials in Stacks 3; permitting you to embed the same Switcher stack over multiple Stacks pages.

Understanding the settings

At first glance Switcher may appear to have a bewildering array of settings. However you will often only need to change a small percentage of the settings provided. And a reminder that you can toggle the groups of settings opened and closed. Beyond the basic settings and advanced settings, there are three main groups of style settings; targeting the tabs, accordion headings and content panels. The settings for the tabs and accordion panels are nearly identical to each other. Typically you can change the basic dimensions of things and then refine the styling applied to elements on their static (normal), hovered and active states. The settings are all grouped logically so they're easier to see and read.

Style overrides

Introduced in version 2.2, it is now feasible to select individual Switcher Items in Stacks edit mode, and tick options in the settings to override the default styles. This grants you the ability to apply unique colouring to each Switcher Item. For example, you could have different tabs or accordion toggles all different colours. Or mark one particular item (like a new product or service) with a brighter title in red or similar. Style overrides do exactly as the name suggests and override the normal styles you apply on the parent Switcher stack. To avoid things become terribly complicated, we just provide simple overrides for colours only.

Responsive behaviour

In accordion mode, each collapsable panel spans the full width of the area the stack is placed within. Content will automatically reflow or scale to fit smaller screens. A RapidWeaver theme with support for responsive images and video will obviously give better results. In tab mode, Switcher stack expands to the width of the area it is placed within. If there is insufficient room to display all the tabs on a single line, we automatically toggle Switcher stack to display as an accordion on smaller screens; thereby removing the risk of tabs spanning over multiple rows or overlaying each other.

Audio and video support

We support basic audio and video inside Switcher, including HTML5 audio, HTML5 video, YouTube and Vimeo. It is best to embed these content types using standard HTML5 markup or using the embed code provided by YouTube and Vimeo. Audio and video stacks are much less likely to work inside Switcher. When an accordion or tabbed layout built with Switcher is toggled, we attempt to pause any playing audio or video. This can help avoid the problem or audio or video continue to play, after a tab panel or accordion panel has been closed. We do not recommend embedding a lot of different video's inside Switcher stacks, as this can have a detrimental effect on page loading speed and performance.

Stack compatibility

Switcher stack supports all basic content types, including plain text, rich text, HTML code, Markdown, static images and some basic video (as detailed above). More complex content types or stacks may not work; for the simple reason they may not like being hidden. This is especially true of addons like slideshows, which typically execute complicated calculations on page-load to configure positioning and animation effects.

Custom links and buttons in Switcher 2.6 [advanced]

In Switcher (version 2.6) you can now create custom buttons or links to trigger your accordion and / or tab panels. We use HTML5 data- attributes to accomplish this; which promote excellent flexibility, together with less markup and an easier setup. Custom links and buttons add extensive flexibility to a stack that is otherwise already relatively powerful.

Start by taking a careful note of the Switcher Name you've setup in the Switcher settings. And as a casual reminder, please remember that the Switcher Name must always start with a letter and cannot contain spaces or special characters. Hyphens, underscores and numbers are permitted, after the first character.

The basic process involves creating a button or link in your webpage and giving it a data- attribute. In HTML markup, your completed link code will look like this:

<a href="#" data-switcher1="6">My Link</a>

Or if setting up links in the RapidWeaver link dialogue window, your configuration would look like this:



In both instances you substitute (change) 'switcher1' to the name of the switcher stack you want the link to take effect on. And change '6' to the number of the tab or accordion your want to trigger. Optionally if you want the page to jump to the starting point of the Switcher stack, change '#' for the name of the Switcher stack.

These custom links your setup work universally with both tabs and accordion setups; so they are great in responsive setups where your tabbed layouts morph to become accordion layouts on narrower screens. It opens up options to hide the default tab or accordion headings and custom-build your own series of links or buttons elsewhere in a page. Clicking on one of these custom links will close non-matching tab or accordion panels and open the targeted one instead. You can use these custom links inside tab or accordion panels, if you wish to provide a form of navigation between tab or accordion panels.

Triggering accordions and tabs from page hashes [advanced]

As of version 2.4, you can have Switcher accordion or tabs triggered open as the page loads. This could be useful in instances where you wish to direct a user to a specific tab or accordion panel. This only works for non-nested accordion and tab setups. You should start in the Switcher settings by ensuring every Switcher stack used on the page has a unique Switcher Name. This is just a method to identify and 'prettify' the links a bit better and help you map things more easily; especially in instances where you have multiple Switcher stacks in operation on the same page. Working on the assumption that you gave your Switcher stack a name of faq, then the links you use would look something like this:

http://example.com#faq4

In this instance, the 4th tab or accordion panel will be toggled open as the page loads. This will override whatever starting tab or accordion you had already configured in the stack settings.

However before we get to the stage of testing hashes in a real web browser, it's important to setup some basic proxy links. A proxy basically has the job of mapping hashes present in the browser address bar to the desired tab or accordion panels you want opened. To setup some proxy links, enter this HTML code in your page; each line for each tab or accordion panel:

<a class="faq1" href="#faq1" data-faq="1"></a>
<a class="faq2" href="#faq2" data-faq="2"></a>
<a class="faq3" href="#faq3" data-faq="3"></a>
<a class="faq4" href="#faq4" data-faq="4"></a>

All that's happening here is that when a hash is detected in the browser address bar (example http://example.com/index.html#faq3) on page load, we map the hash to the class attribute, and then map the class attribute to the corresponding data- attribute. The desired accordion and tab panel is then triggered as the page loads.

You can copy the above code and simply replace all instances of 'faq' with the name allocated to your Switcher stack. Due to the dynamic nature of Switcher, we cannot scroll longer pages to specific tab panels or accordion blocks; you should instead aim towards placing Switcher stacks above the page fold.