Switchers Set Name #
Give all the elements that are part of the same switchers set the same name, to link them with each other.
Be careful to make the name unique, so that if you copy paste the design on another page, or have it in a popup, it won’t interfere with a Switchers setup already present there.
Behaviour #
You can select between 7 different content switching behaviours. The three well known Tabs, Accordion and Toggle, and 4 creative options. Here is what each one of them do.
Tabs #
Always 1 opened, and only 1 opened. Switching from one tab to the other has no animation.
Learn more about the proper setup of a Switchers set with the Tabs behaviour.
Gliding Tabs #
Same as tabs (always 1 opened, and only 1 opened), but with a gliding animation when switching from one to another.
This is also very similar to an Accordion, with always 1 opened.
Refer to the proper setup of a Tabs behaviour, as it is the same.
Accordion #
Only 1 opened at a time, that can be closed to have 0 opened.
Very similar to Gliding Tabs, except in the way the elements are laid out on the page. And with Gliding Tabs, there is always 1 opened.
Learn more about the proper setup of a Switchers set with the Accordion behaviour.
Toggle #
As many opened as you want, or none. Clicking a ‘Switch’ will toggle the related ‘Content’ on and off, but won’t close other ‘Content’.
Refer to the proper setup of an Accordion behaviour, as it is the same.
Multi Row Tabs #
Tabs that are set on multiple rows on desktop & tablet, and stacked on mobile.
On mobile, the content will display right below the ‘Switch’, making it ideal, and solving the problems of the content being too far from the tabs title on mobile.
Requires a very precise setup: learn more about the proper setup of a Switchers set with the Multi Row Tabs behaviour.
Multi Row Accordion #
Gliding Tabs that are set on multiple rows on desktop & tablet, and stacked on mobile, in effect becoming an Accordion on mobile.
On mobile, the content will display right below the ‘Switch’.
Requires a very precise setup: refer to the proper setup of a Multi Row Tabs behaviour, as it is the same.
Popup #
Open a section sets to ‘Content’ as a popup, and navigate with arrows in a lightbox.
Requires a precise setup: learn more about the proper setup of a Switchers set with the Popup behaviour.
Active Tab on Load #
Default is tab 1. This will work for all behaviours, except popup, as no popup is active on load by default.
Switch Content on Hover #
Enable to make the content change when you hover, instead of click, a ‘Switch’ element. On mobile, clicking will still work just fine.
Autoscroll to Opened Content #
Each time you will click (or hover, if that is set) a ‘Switch’ element, it will scroll to the related content, with the offset you entered under ‘Scroll Offset’.
Not recommended if you have Switch Content on Hover enabled. Or in that case, consider enabling ‘Autoscroll on Mobile Only’.
Autoscroll on Mobile Only #
To have the autoscroll enabled on mobile devices only.
Scroll to Switches Instead of Contents #
Enable to autoscroll to the switches instead of contents.
#
Enter the scroll offset in PX when it autoscrolls to the opened content (or switch if ‘Scroll to Switches Instead of Contents’ is enabled).
Autoscroll From The URL #
Autoscroll to specific content by adding the appropriate anchor to the URL.
Example: website.com/page/#anchortab01.
Automatic #
Automatically generate the names based on the text content found in the first set of Switches.
Disable this setting if you want to manually enter URL Anchor text for each related ‘Content’ elements.
URL Names #
Shows only if ‘Automatic’ is disabled. Enter the anchor text, without the ‘#’, for each related ‘Content’ elements.
Avoid spaces or special characters for these anchor texts.
Example: If you have 4 elements set as ‘Content’ in your SP Switchers, enter a name for each of theme here. Then, adding website.com/page/#name01 to the URL, will open and scroll to ‘Content’ element 1. #name02 to ‘Content’ element 2, and so on.
URL Scroll Offset #
Enter the scroll offset in PX for when it will scroll to the Content from the URL.
Clean Up the Editor #
Hide all the “content” related to the same Switcher set, in the editor only. Consider enabling this only after the content switcher is set up.
