Remember Aaron's Switchr?
It wasn't the most elegant of stacks in edit mode – it took up the whole screen. But it was a novel stack that allowed you to choose whether it was an accordion or a tabbed stack – useful for elegantly switching through various sets of information on a webpage – but only if you liked the predefined themes. Sadly, as time progressed, Switchr would, with increasing frequency, display an incompatibility with other stacks and break the page.
When Aaron turned to other things, Will Woodgate of Stacks4Stacks fame took over Stacks Maniac and one of the first things he did was add the missing 'e' to
Switcher. Of course, he also fixed the problems that had developed and added new features.
But, Will being Will, he wasn't satisfied to rest on his laurels. Yesterday a new and completely revised, fully responsive Switcher was released. Switcher is now a phenomenal stack with an amazing choice of style and colour settings which permit you to build just about any conceivable style of tabs or accordion, with just about any content you please.
When you first drop A Switcher stack onto your page, it is configured as an accordion and contains a Switcher Item with a title area and an Item Content – the dropdown area. At first glimpse, the Switcher Item settings panel contains an overwhelming number of settings, but these settings turn Switcher into the most versatile accordion stack I've seen to date. Thankfully, you won't need to change all of the settings.
The first thing you'll need to do is decide whether your content should appear in a tabbed area, or in an accordion. This is also the first setting in the panel. If you choose Tabs, your tabbed area will gracefully morph into an accordion on mobile devices with smaller screens, meaning that your content is always presented in an accessible fashion.
You can place multiple instances of Switcher on a page, but each one must have a unique ID to prevent unwanted content from being displayed. The settings below the ID let you choose which accordion or tab will be opened by default. Setting a high number (100 or over is recommended on the product page) will allow Switcher to open with everything closed. I prefer this setting for an accordion, as I find it ideal for FAQs etc.
Now, before you plough on and start altering settings, you have to note that there are two sets of them – one for Tabs and one for Accordions. I recommend collapsing the unneeded panel to avoid confusion. Don't forget, though, that if your initial setting is for Tabs, that you still need to configure your accordion for mobile devices.
The upper settings panel is for Tabs and will allow you to move the tabs to the Top, Bottom, Left, or Right of your content. You can also set the Tab and the Tab Text Alignment, the Tab Width, the Line Height and the Tab Font Size. Both the Tabs and Accordion can contain Fontawesome icons and the settings that follow are for the Icon Size, Colour and Margin. The Icon Colour has four different states; Static, Hovered, Clicked and Active.
You will find the same settings for both the Padding the Margins and the Radius. And that not being sufficient, the settings are repeated once more for the Border Colour, the Tab Background Colour and the Tab Text Colour.
This multitude of settings allow you to create animated tabs/accordion bars. I especially like the 'animated' padding, which allows the tab/accordion bar content to slide in (or out) when hovered and/or clicked.
This multitude of settings is also repeated for the Accordion settings below, but in addition, you will find settings for the Icon Width, Heading Height and the Fontawesome Icons for the open and closed state of the Accordion and, it goes without saying, their hovered and static states.
Next follow the Switcher Panel settings. These include The Content Padding and Margin, the Radius and Border Colour and the Panel and Text Colours. Luckily there are no hovered states for the content, that would be just too much!
As if we didn't have enough settings already, the Switcher Panel also contains Advanced Settings.
Auto-Width Tabs will override any tab settings you have made and the tabs will automatically adjust to fit width of their content and avoid line breaks. This also avoids having Tabs of differing height.
Normalise Icons sets the icon formatting to match the text formatting.
Note: Unlike many stacks, Switcher doesn't have a an option to format the text content within either the Tabs, or the Accordion; you can, however apply formatting via HTML tags.
Note: Applying H1–H6 tags causes a line break. The Header will be displayed below the Icon.
Hide Icons In Accordions will hide the Fontawesome icons in the Switcher accordion toggles.
Activate Accordion On Hover will cause the accordion dropdown to appear on mouseover.
Activate Tabs On Hover does exactly the same for the tabs.
Did I say finally?
If you open the settings panel for a Switcher Item, you will find settings that allow you to override the Tab settings, the Accordion settings and the Content settings for each individual content area.
The latest Switcher version will allow you to easily add links or buttons to open a specific dropdown. To do so, you need to add a Data attribute to your URL, with the Switcher ID and panel number that you wish to open. As before, you may also link to Switcher panels from other pages. You'll find extensive instructions on the Switcher product page.
You can drop pretty much anything you want into a Switcher Item panel. Video and audio, including YouTube and Vimeo can be added using HTML5 audio or HTML5 video calls. AV will be paused when the panel is closed.
Oh, there's just one more thing …
In case you never took a look at Switcher before, you can also build nested Accordion toggles – a Switcher toggle within a Switcher toggle. Don't forget, though, that each Switcher stack will need its own ID. It is not possible to nest tabbed stacks.
I must admit that I haven't taken a look at Switchr/Switcher since my disappointment in days of old. When I opened Switcher today, I was pretty much blown away. It's a phenomenal content switcher – did I mention that already? ¯\_(ツ)_/¯
Please note that the screen shots were made using fairly basic settings. If you want to see how versatile Switcher really is, take a look at the Stacks4Stacks product page.
Will Woodgate has just updated ZipList, a stack that allows you to add simple collapsible lists to your RapidWeaver website.
The lists behave in a similar fashion to an accordion in that when a list item is clicked, the information it contains is revealed below it.
ZipList is useful for revealing product information, specifications, or FAQs, for instance and helps keep information tidy, accessible and organised.
ZipList in action – Ideal for FAQs
The latest version of
ZipList has been completely rewritten to modern standards and the brand new interface has been optimized for Stacks 3. Several additional style settings have been added for ZipList titles.
UPDATE: A second update now allows the dropdowns to close automatically when the next is clicked. Thanks Will!
ZipList stacks are marked-up as HTML definition lists; so they are fully accessible and comply to SEO standards.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16