Toggle

Toggle 2.0.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
• Browser: A current version of Chrome, Firefox, Safari or another modern browser

JavaScript is required for interactive Click and Hover modes. Media Query mode uses UIkit's native responsive Toggle behavior.

Toggle shows, hides or switches groups of YOOtheme Pro Builder content. It supports disclosure-style content, view selectors, responsive layouts and two-control interfaces such as Grid/List switches.

Choose an interactive Click or Hover action, or use native Media Query mode to apply a CSS class at a breakpoint.

1. Add Flart Studio → Toggle in YOOtheme Pro Builder.
2. Add the required elements to its Sublayout.
3. Keep Content → Edit mode enabled while editing.
4. Select the Action, Rows Split and control layout.
5. Configure the visible and alternate control states, animation and optional public Toggle ID.
6. Disable Edit mode and test the Toggle on the frontend.

Use ordinary YOOtheme Pro Builder elements inside Toggle, including text, images, grids, galleries, switchers, forms and nested layouts. Child elements retain their normal Dynamic Content behavior.

The runtime uses strict element-owned markers, so controls inside a nested component do not accidentally change the state of an outer Toggle.

Edit mode shows the complete sublayout in Builder so hidden content remains available for editing. Its preview outlines and hints are Builder-only.

While Edit mode is enabled, the element is omitted from the public frontend before product assets load. Its sublayout is also excluded from YOOtheme's searchable or fallback content output, so unfinished content is not published indirectly. Disable Edit mode when the element is ready.

Builder displays a placeholder so content can be added. On the public frontend, an empty Toggle produces no visible element and does not load product assets.

A Rows Split selection also stays in the unsplit placeholder state until enough rows exist to create both groups.

• Click: Changes state when a control is activated.
• Hover: Changes state when the pointer enters or leaves the owned control.
• Click and Hover: Accepts either interaction while preserving one coordinated state.
• Media Query: Applies the configured class through UIkit at the selected responsive breakpoint.

Click and Hover modes use the managed Toggle runtime. Media Query mode is rendered as a separate native UIkit path.

Click is appropriate when visitors deliberately open, close or switch content. Hover reacts to pointer entry and exit and also protects nested interactive descendants from changing the parent Toggle accidentally.

For essential or touch-oriented controls, prefer Click. Keyboard activation remains available through the control's button semantics.

Interactive modes support UIkit animations together with product animations such as Reveal Top and Slide & Reveal Top. Configure the duration and whether the closing transition should also animate.

Select None for an immediate deterministic state change. Rapid repeated activations are coordinated so an interrupted transition cannot leave both control states visible.

Rows Split divides the sublayout at the selected row boundary into a Before Split group and an After Split group. This supports expandable content and two-view layouts without creating a second element.

A split is created only when the selected boundary exists. If there are too few rows, Toggle renders one unsplit group and does not add split-only spacing or alignment classes.

Single uses one adaptive control whose text and icon can change with the Toggle state. Button Group displays both state controls at the same time and marks the active choice.

Button Group is useful for Grid/List selectors, product views and other interfaces where visitors should see both available states immediately.

Interactive controls can be placed before or after the Toggle content. With the supported dynamic bottom behavior, the lower control appears only when the expanded content extends beyond the relevant visible scroll area.

This prevents a redundant close control from appearing when the entire expanded result is already visible.

When the lower control closes long content, Toggle waits for the transition to finish and then restores the upper control or content origin to the visible area.

The calculation uses the nearest relevant scroll context, including the page, a Modal body or an Off-canvas panel. Resize and layout changes are re-evaluated so the lower control appears only when it is useful.

Media Query mode uses UIkit's native uk-toggle media behavior to add or remove the configured CSS class at the selected breakpoint. It does not render interactive buttons, button slots or button spacing, and it does not load the product Toggle runtime.

This mode is intended for responsive layout state, not visitor-controlled disclosure.

Class Target selects whether the responsive class is applied to the Before Split or After Split group. Enable Opposition mode to apply the complementary responsive state to the other group as well.

With a visibility class such as uk-hidden, this creates two mutually responsive groups. Custom classes are also supported; their visual result is defined by the site's CSS.

Group Spacing belongs to the group whose class state is being toggled. This keeps spacing aligned with the selected Class Target instead of leaving an empty gap when that group is hidden.

In Opposition mode, the responsive pair controls which group is visible, so separate fixed spacing is not added between two simultaneously displayed groups.

1. Enter a stable value in Configuration → Toggle ID without a leading #.
2. Enable Toggle Helper.
3. Use an external link whose fragment targets that ID.

Toggle Helper resolves the target at activation time, supports same-page and cross-page navigation and safely ignores unavailable or ambiguous targets.

• #product-view — open the target by ID.
• #product-view,120 — open it with a 120-pixel scroll offset.
• #fs-toggle=product-view — use the structured Toggle Helper form.
• #fs-toggle=product-view/navigation-panel,120 — activate several compatible targets in order and apply an offset to the second target.

The same fragments can be used on a full same-site URL for activation after navigation. Toggle Helper preserves ordinary link behavior when a fragment is not one of its valid activation forms.

No. Media Query mode has no visitor-operated Toggle control or managed interactive state, so it intentionally does not expose Toggle Helper activation.

Use Click or Hover mode when the element must respond to an external link or URL fragment.

Yes. Disable the built-in link, assign a stable Toggle ID and enable Toggle Helper. Your own Button, Link or Navigation item can then use a supported fragment.

The external element remains an ordinary link. Toggle Helper adds only the activation behavior required by the target.

The primary and alternate states can each have their own text, icon and ARIA label. A Single control switches between these authored values. A Button Group displays both and exposes which choice is active.

Text is optional when an icon and meaningful ARIA label are supplied. Translated fallback labels are used where the product requires an accessible name.

Yes. Elements inside the sublayout and source-enabled Toggle fields can use YOOtheme Pro Dynamic Content. IDs, labels and product-interpreted values are normalized again after Dynamic Content resolves.

Click Action is intentionally static because it executes JavaScript and therefore does not accept a Dynamic Content mapping.

Yes. Link → Click Action runs custom JavaScript before Toggle activation. Returning false or preventing the click event cancels the state change for mouse, Enter and Space consistently.

Use this field only for code written by a trusted Builder author. A site Content Security Policy that blocks inline event handlers may prevent the Click Action from running.

Interactive link controls expose button semantics and support mouse, Enter and Space through one ordered activation path. Controls publish their relationship and state with attributes such as aria-controls and aria-expanded.

Button Group controls also communicate the active choice. Provide meaningful labels for icon-only controls and keep the revealed content order logical for keyboard and screen-reader users.

Yes. Each runtime instance resolves only the controls, groups and events owned by its own root. A click, hover or UIkit event inside a nested Toggle does not silently change an ancestor's state.

Give externally addressable Toggles unique IDs and test nested layouts at all relevant breakpoints.

Yes. Multiple Toggle instances can run independently on one page. The managed runtime initializes valid elements inserted by Builder refreshes or loaders, preserves strict ownership and cleans up observers, listeners, timers and animations when an instance is replaced.

If content is inserted through Load More or another loader, that response must also provide the product assets required by the returned layout.

Use YOOtheme Pro's native General, Advanced and Custom CSS controls. Product markers such as .fs-toggle, .fs-toggle__control, .fs-toggle__container, .fs-toggle__group and [data-fs-toggle-group="head"] provide stable targets.

Prefer an authored custom class for site-specific styling. Do not rely on temporary Builder preview attributes as public selectors.

Yes. Toggle includes product translations for its Builder fields, descriptions, options, tooltips and frontend fallback labels. YOOtheme Pro continues to translate its native General and Advanced settings.

If a product translation is unavailable, the original English text is used.

• Confirm that the sublayout contains a real child element and Edit mode is disabled.
• For Rows Split, verify that enough rows exist to create the selected boundary.
• Check that Click or Hover mode is selected when using a built-in or external control.
• For external activation, enter a unique Toggle ID without # and enable Toggle Helper.
• Remember that Media Query mode has no interactive controls or Toggle Helper.
• Make sure a loader delivered the required product assets with dynamically inserted content.
• Clear CMS, YOOtheme, browser and CDN caches after an update.
• Check the browser console for a missing runtime file or Content Security Policy error.