Thanks! Please check the following:
System requirements
This stack requires RapidWeaver and the Stacks plugin. It will not work with other platforms (like Wordpress). We recommend you aim towards installing the latest version of RapidWeaver and Stacks that your computer is compatible with.

License agreement
You may use this purchased stack an unlimited number of times in personal or commercial projects, request technical support and receive free updates in future.

This stack can be installed or synced onto all computers that you own. You are permitted to make archival backup copies of the stack.

You may not resell or make this stack available for download, remove copyright credits or license information.

The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.

Refund policy
By purchasing this stack, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.

All purchases are final and refunds will not be provided (we physically cannot un-download or remove stacks from your computer).

You are reminded to make use of the free demo versions already provided on the website, to fully evaluate stacks for compatibility and suitability before purchase.

Customer support
If you have questions that relate specifically to this stack, you should make contact via the contact page. We aim to answer all messages within 12 hours, Monday to Friday.

If you require a faster response at weekends or during public holidays, please post your question(s) to the RapidWeaver forums, where a support volunteer may be able to assist you quicker.
Checkout  
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
 
This video can be watched in HD, at full-size on the YouTube website. Please click the 'YouTube' button in the video play bar.
 
The 'Switchr' stack was originally developed by Aaron Marquez of StackManiac. Now named Switcher, this is a completely free update for all existing users. If you purchased the stack before 1st August 2015, please contact us with proof of purchase, so you can receive a 100% coupon code to obtain this latest version. If you purchased Switcher after 1st August 2015, you can download the latest version from your Paddle Locker. Switcher installs itself as a new stack element, alongside previous versions of Switchr or Switcher. The main difference with Switcher '2.0' over previous versions is the inclusion of many more style and colour settings and support for unlimited content panes. You'll find responsive behaviour is handled the same as before and all the original tab and accordion styles can still be recreated with this updated stack. We were able to incorporate every single feature request into this updated stack; so Switcher is very much a stack shaped by its users!


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. You can also download the Stacks4Stacks website using the normal link in the footer, if you've purchased the stack and want to reuse these examples.
 
Default settings
A Switcher stack dragged and dropped into the page, configured with four titles and content panes. No style settings changed.
 
  • Item One
    Content for item 1. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
  • Item Two
    Content for item 2. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
  • Item Three
    Content for item 3. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
  • Item Four
    Content for item 4. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
 
Default tabs
A Switcher stack dragged and dropped into the page, configured as tabs with four titles and content panes. No style settings changed.
 
    • Item One
      Content for item 1. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    • Item Two
      Content for item 2. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    • Item Three
      Content for item 3. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    • Item Four
      Content for item 4. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
     
    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).
     
    • Item One
      Content for item 1. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    • Item Two
      Content for item 2. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    • Item Three
      Content for item 3. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    • Item Four
      Content for item 4. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
     
    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.
     
      • Item One
        Content for item 1. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
      • Item Two
        Content for item 2. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
      • Item Three
        Content for item 3. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
      • Item Four
        Content for item 4. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
       
      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.
       
        • Item One
          Content for item 1. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
        • Item Two
          Content for item 2. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
        • Item Three
          Content for item 3. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
        • Item Four
          Content for item 4. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
         
        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.
         
        • Item One
          Content for item 1. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
        • Item Two
          Content for item 2. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
        • Item Three
          Content for item 3. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
        • Item Four
          Content for item 4. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
         
        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.
         
          • Sustainability

            We only get one opportunity...

            Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

          • Natural Resources

            Improving resourcefulness through technology...

            Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

          • Biodiversity

            At the centre of everything we do...

            Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

          • Making Progress

            Making progress is all about following the correct path and moving forward...

            Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

           
          Nested accordion
          This is a feature quite a few people requested and we've been able to build into Switcher as part of a free 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.
           
          • One
            • Item 1A
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 1B
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 1C
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 1D
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
          • Two
            • Item 2A
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 2B
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 2C
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 2D
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
          • Three
            • Item 3A
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 3B
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 3C
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 3D
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
          • Four
            • Item 4A
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 4B
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 4C
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 4D
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
          • Five
            • Item 5A
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 5B
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 5C
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 5D
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
          • Six
            • Item 6A
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 6B
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 6C
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
            • Item 6D
              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
           

          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:

          screenshot 2016-11-18 at 12.05.07

          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.
          Bookmark or share this page
          Baidu 百度
          Blogger
          Delicious
          Digg
          Facebook
          Google+
          LinkedIn
          LiveJournal
          MySpace
          Одноклассники
          Reddit
          Renren 人人网
          StumbleUpon
          Tumblr
          Twitter
          ВКонтакте
          Weibo 微博
          XING
          Contact Us
          Email This Page
          Print This Page
          PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

          Cookies

          Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.