The content switcher element provides an easy way to switch visibility between multiple element variations. Especially useful for price switching and toggling links/buttons to take users to different pages.
The content switcher is a nestable element, which has ‘content blocks’ as child elements. Simply place inside elements inside the content blocks that you want to switch, then configure a Toggle Switch element to allow the user to switch between each version.
Example structure, switching between four different headings..
Show only first child element in builder – After adding the elements, you can enable this setting so that only the first element is visible while in the builder. (to replicate as it will appear on the front end)
Content Blocks – Add any number of block elements, making sure to match the number of available options inside of the toggle switch.
Transition Duration – The fade transition timing can be changed by increasing the transition duration. The default is 0.
I’m trying to use the content switcher as tabs.. Generally..I’d say don’t. Use the tabs element instead. The content switcher is ideal for switching out text in multiple places, like with pricing tables where the pricing table remains static, and you’d have multiple switchers inside switching the price, the button or any text inside. If you’re trying to create tabs where an entire section hidden inside a tab content, often it’s simpler to use the element that was designed exactly for that. Although you may be able to do it with content switchers, there’d likely be less customisation needed by sticking with tabs.