Switcher Pro

Switcher 2.1.0 requires:

• PHP: 8.2.0 or newer
• YOOtheme Pro: 5.0.51 or newer
• Joomla: 5.4.9 or newer, or WordPress: 7.1.3 or newer
• A current version of Chrome, Firefox, Safari or another modern WebKit-based browser

JavaScript must be enabled for switching, URL synchronization, Custom Navigation, scrolling and autoplay.

Switcher organizes related content into tabs, subnavs, thumbnail navigation or an accordion. Visitors can move between items by clicking, hovering, swiping, following a URL fragment or using a separate Custom Navigation element.

The element also supports browser history, responsive navigation, sticky side navigation, automatic playback, progress indicators, Dynamic Content and synchronized controls.

Switcher is the full Pro element. Each item can contain a title, meta text, rich content, image, link, custom fieldsets, custom grids, lightbox content and a Builder sublayout.

Switcher SL uses the same navigation, URL, history, scroll and autoplay runtime, but each item is simply a Builder sublayout with a navigation title and optional thumbnail or icon. Choose SL when the complete item design should be built from ordinary nested Builder elements.

1. Add Flart Studio → Switcher or Switcher SL in YOOtheme Pro Builder.
2. Edit the placeholder items or add your own items.
3. Give every item a clear title or navigation label.
4. Choose the navigation type and interaction under Settings → Navigation.
5. Configure animation, history, swipe, scrolling or autoplay under Settings → Switcher.
6. Use the remaining sections to style the item content and navigation.

Both Switcher variants support Tabs, Subnav Pill, Subnav Divider, Subnav, Thumbnav and Accordion.

Tabs and subnavs are suitable for text navigation. Thumbnav can use an image, hover image, icon and optional label. Accordion combines each navigation title with its item content in one expandable row.

Enter a stable value in the item's Navigation Link field when the item needs a predictable URL, for example features. The rendered link becomes #features.

If Navigation Link is empty, Switcher creates a fragment from the effective navigation label or title. Empty or unsupported values fall back to tab-1, tab-2 and so on. Duplicate fragments receive numeric suffixes. For links you plan to publish, use short unique ASCII letters, numbers, hyphens or underscores.

1. Set the item's Navigation Link to a stable value such as pricing.
2. Open or share the page with #pricing at the end of its URL, for example https://example.com/services#pricing.

When the page loads, every Switcher that owns that fragment activates the matching item. An Accordion item is opened if necessary. If the fragment is missing, unrelated or invalid, the normal saved initial state is kept.

Yes. A legacy fragment such as #details activates every Switcher that contains that item fragment. For several different targets, use the grouped format #fs-switcher=profile/details. Each Switcher activates the first listed target it owns.

To address exact instances, give each Switcher a unique Advanced ID beginning with fs-switcher-, then use a scoped URL such as #fs-switcher-main=details&fs-switcher-sidebar=profile. A scoped target overrides the grouped list for that instance.

Push adds a browser history entry whenever a visitor deliberately changes an item, so the Back button returns to the previous Switcher state. Replace updates the current entry without adding another step. None changes the visible item without changing the URL.

Back, Forward, hashchange and popstate restore participating Switchers. Returning to an empty fragment restores their captured initial state.

Yes. Disable Show the navigation in the Display section when another element controls the Switcher. The navigation remains in the DOM with the native hidden attribute, so it occupies no space and is not keyboard reachable, while UIkit, URL fragments and external controls can still switch the content.

The saved navigation type and thumbnail settings are preserved. The option is not available for Accordion because its navigation is also the visible item content.

1. Add a Nav, Button group or another element containing links.
2. Add the class fs-switcher-toggle to its wrapper under Advanced → Class.
3. Set each link to the same fragment used by a Switcher item, for example #overview, #features and #pricing.

The runtime activates matching items, synchronizes the active control and applies the target Switcher's History setting. Use same-page fragment links; links to another page, modified clicks, downloads and explicit new-window links keep their normal browser behavior.

A fs-switcher-toggle wrapper without an ID is global: it activates every registered Switcher that owns the selected fragment.

For one exact target, give the Custom Navigation an ID such as feature-tabs and give the target Switcher the Advanced ID fs-feature-tabs. The runtime adds the fs- prefix when resolving the target, so only that exact Switcher consumes the control. Keep both IDs unique on the page.

1. Create the original target Switcher and give it the Advanced ID fs-feature-tabs.
2. Create a second Switcher or Switcher SL and set its navigation Type to Accordion.
3. Give this Accordion controller the Advanced ID feature-tabs and class fs-switcher-toggle.
4. Use matching Navigation Link values in both elements, for example overview, details and pricing.
5. Optionally disable Show the navigation on the original non-Accordion Switcher.

The ID pair is exact: controller feature-tabs targets Switcher fs-feature-tabs. The class alone is not enough.

Opening an item in the Accordion activates the same item in the original Switcher. Changing the original Switcher through its own navigation, a swipe, autoplay, a URL fragment or browser history opens the corresponding Accordion row.

The original Switcher owns URL history; the Accordion controller does not create a competing history entry. Allow multiple open items is disabled automatically because one controller state must map to one target item. A collapsible controller may still return to all items closed; closing it does not deactivate the currently displayed target panel.

• Confirm that the Accordion has class fs-switcher-toggle.
• Confirm the exact ID pair, for example controller feature-tabs and target fs-feature-tabs.
• Make sure both elements render on the same page and every paired item uses the same Navigation Link fragment.
• Use unique IDs and avoid Builder-generated or duplicated IDs.
• After changing IDs or classes, reload the Builder preview and clear stale page, browser or CDN caches.

If the class is present but the fs- target ID is missing, the controller cannot establish scoped ownership.

Custom Navigation scrolls to a successful non-Accordion target when the top of that Switcher is outside the viewport. Add a modifier to the same fs-switcher-toggle wrapper:

• fs-switcher-toggle-scroll-always — scroll after every successful activation.
• fs-switcher-toggle-scroll-disable — never scroll from that controller.

The disable class wins if both are present. The older fs-no-scroll alias still works but should not be used for new layouts.

Enable Scroll → Enable scroll on tab change and choose an offset from 50 to 300 px. A non-Accordion Switcher scrolls only when its top is outside the viewport. Accordion navigation scrolls to the selected title after the content transition has settled.

Direct scrolling is suppressed when an Accordion allows several open items because no single panel top is deterministic. Switchers inside desktop or mobile headers may activate from a URL but never take control of page scrolling.

Click is the standard interaction. Hover activates an item after a short pointer delay on devices that support hover. Hover activation itself does not add a history entry.

In Hover mode, enable Trigger item link on click when clicking the active navigation entry should also follow that item's normal link. Modified clicks, downloads, new-window links and links to another document retain native browser behavior.

Top and bottom navigation can be left, right, centered or justified. Left and right positions create a responsive grid with configurable navigation width, column gap, row gap and breakpoint. Below that breakpoint, the navigation returns to its horizontal presentation.

Side navigation can be vertically centered, divided, shown in the primary nav style and made sticky with its own breakpoint and top offset. Don't wrap into multiple lines adds horizontal overflow handling for long navigation rows.

Accordion mode provides Small, Default, Large or no content padding, optional navigation thumbnails, Allow multiple open items and Start with all items closed.

Autoplay requires one deterministic active item, so multiple-open and initially-collapsed behavior are disabled while autoplay is active. When an Accordion acts as fs-switcher-toggle for another Switcher, multiple-open mode is also disabled automatically.

Non-Accordion navigation can use fade, scale or directional slide transitions. Match content height keeps the item area at a consistent height, and Disable swipe navigation controls touch swiping on mobile devices.

Swipe is disabled by default. Enable it when horizontal touch gestures suit the page; ID-linked Custom Navigation, including an Accordion controller, follows the item selected by a swipe.

Enable Autoplay and choose an interval from 2 to 60 seconds. Autoplay starts only when at least two items are present. A manual item change synchronizes the active index and starts a fresh interval.

With Pause on hover, pointer or touch interaction pauses the timer. Autoplay also pauses while the Switcher is outside the viewport or the browser tab is hidden, and resumes only after every pause reason has cleared.

Enable Progress in the Autoplay settings, then place the bar above or below the navigation or at the top or bottom of the item area. Configure its height, fill color, track color and margin.

The bar runs only while autoplay is active. It pauses at the current progress together with the timer, resets after a manual change and is removed when fewer than two items remain.

A Pro item can contain a title, meta text, rich content, a main image, item link, navigation label, navigation image or icon, a Builder sublayout and up to 20 custom fieldsets arranged through up to 6 custom grids.

Individual items can override selected panel, grid, visibility, focal-point, text-color, link and modal values while the parent element keeps the visual system consistent.

The Display section can hide the title, meta text, content, sublayout, image, link, navigation label, navigation thumbnail or complete non-Accordion navigation without deleting saved values.

Hidden content is also excluded from Switcher's searchable HTML. This prevents search results from finding text that a visitor cannot see after opening the page. Disabled or empty custom fields, grids and sublayouts are excluded as well.

Enable Strip HTML / Limit → Enable plain text output for a title, meta, content or custom fieldset text when the rendered value must be plain text. The saved Builder content is not modified.

A limit of 0 outputs the complete plain text. A value from 1 to 500 shortens only longer content and appends an ellipsis.

Switcher Pro provides up to 20 reusable fieldsets containing text, meta, image or icon and link data. The parent controls their typography, visibility and target grid, while each item supplies values and optional overrides.

Advanced mode enables up to 6 grids that can appear above or below the main content, at the top or bottom of the item, or inside the image cell. Grids support responsive columns, gaps, dividers, panels, mixed item widths and optional slider controls. Empty fieldsets and grids do not render.

A Pro item sublayout or an SL item can contain ordinary YOOtheme Pro Builder elements, including complex grids and other supported Flart Studio elements. Nested elements that need the current item data can use Parent as their Dynamic Content source.

A sublayout containing only an empty row → column scaffold is treated as empty. Add at least one real child element. Disabling Show the sublayout removes it from both visible and searchable output without deleting it.

Yes. Switcher Pro supports Inline Content, Modal Window and Mixed Mode. Inline content can be placed around the main content, in the image cell or in a custom grid. Modal mode can group all item sublayouts into one sequence or keep each modal separate.

Configure modal size, full-screen mode, stacking, close control and optional header. Item links and custom fieldset links can act as modal toggles. For Dynamic Content, map a stable Modal ID when a deterministic connection is required.

Switcher Pro can combine item links into one UIkit lightbox gallery. Choose slide, fade or scale transitions; slidenav, dotnav or thumbnav; persistent controls, counter, background closing and optional processed image dimensions.

Titles and content can appear in the panel, in the lightbox caption or in both places. Supported targets are classified as processed images, direct videos or iframe content. Enable Use image source when clicking the main image should open its own source while the title and button keep their normal item link.

The Link section controls fallback text, ARIA label, title, target, download behavior, nofollow, noreferrer, button or link style, size, full width, placement and visibility. An item can override text attributes and enable additional boolean flags.

Global boolean flags are additive: an item may enable an option that is off globally, but it does not disable an option already enabled for the complete element. Interactive toggle turns a fragment link into a UIkit toggle for modal-style interactions.

Yes. Thumbnav and optional Accordion thumbnails can use a navigation image, a separate hover image or an icon. If no dedicated navigation image exists, Switcher Pro may fall back to the main item image.

Configure width, height, icon width, focal point, border, grid gap, loading priority, inline SVG color and optional labels. Thumbnav can shrink images when space is limited; this setting and multi-line overflow navigation are normalized so they do not conflict.

Yes. Map supported parent and item fields through YOOtheme Pro Dynamic Content. Switcher normalizes the resolved values at the final product-owned boundary, so values received from articles, custom fields or other sources follow the same rules as manually entered values.

Use stable Navigation Link and Modal ID values when external URLs or modal controls must remain predictable. Inside a nested sublayout, choose Parent to read data from the current Switcher item.

Item and custom field links accept relative URLs, fragments and explicit HTTP, HTTPS, email or telephone schemes. Passive image values accept supported relative, protocol-relative and HTTP(S) media URLs. Executable, malformed, credential-bearing or unstable URL forms are rejected before output.

Image alt and title metadata is converted to plain text, and final HTML attributes are escaped separately. If a dynamically mapped link or image disappears, inspect the resolved value rather than bypassing the validation.

Yes. Every Switcher owns its navigation, observers, history participation, timers and cleanup. Nested instances are matched through their nearest exact wrapper so an outer Switcher does not claim an inner one's controls.

Switcher also detects elements and Custom Navigation inserted after page load and handles YOOtheme Builder preview replacement. Use unique Advanced IDs whenever an instance is addressed by scoped URLs or ID-linked controls.

The live manager is available as window.FSSwitcherManager. Use window.FSSwitcherManager.refresh() to rescan Switchers and Custom Navigation after unusual third-party DOM changes.

Use window.FSSwitcherManager.pauseAll(true) to pause all registered autoplay instances and pauseAll(false) to resume them. Set window.FSSwitcherManager.debug = true for diagnostic console messages. The getSwitcher() and getToggle() methods are diagnostic interfaces, not saved-layout APIs.

Use YOOtheme Pro's native typography, color, panel, image, grid, spacing, visibility and animation controls first. The Advanced CSS editor lists the supported .fs-switcher__* selectors and automatically scopes them to the current element.

Use .el-element as the root in that editor, for example .el-element .fs-switcher__nav-item-link. New CSS should use the BEM selectors. Legacy classes such as .el-nav, .el-item and .el-link are deprecated and scheduled for removal in 3.0.0.

Yes. Switcher includes localized labels, options and descriptions for 28 languages. Its catalogs supplement YOOtheme Pro's locale rather than overriding matching Builder translations used by other elements.

If a matching product catalog is unavailable or invalid, the original English source text remains available as the fallback.

The frontend Switcher runtime does not make network requests of its own. It manages markup, navigation, history, scrolling, autoplay and dynamic page changes already present in the document.

Images, videos, iframes and linked resources still load from the URLs configured by the site author. Joomla or WordPress may perform normal extension update checks separately.

• Confirm the minimum PHP, CMS and YOOtheme Pro versions and that JavaScript is enabled.
• Check that each visible item has a title or navigation label and actual enabled content.
• For URL activation, inspect the final fragment and use unique Advanced IDs for scoped targets.
• For Custom Navigation, verify fs-switcher-toggle, matching same-page fragments and the exact controller/target ID pair.
• For autoplay, confirm at least two items and check hover, touch, viewport and hidden-tab pause conditions.
• Reload the Builder preview and clear CMS, YOOtheme, browser and CDN caches after an update.
• Recompile the active YOOtheme style if the element appears unstyled.
• Run window.FSSwitcherManager.refresh() or enable its debug flag when a third-party script replaces page markup.