Element Groups ❺🧪

Dynamically show and hide elements on your page based on user actions

This feature is not yet available to the public.

Tab components and accordions are great when your elements are together in one area of your page, but what about when your layout is more complex? What happens when the things you are clicking are scattered around the page, and the corresponding things that your showing and hiding are similarly scattered?

SA5 Element Groups solves this by allowing you to define arbitrary elements groupings, and then conditionally display only those elements within a group that are tagged with a specific item name.

Concepts

Here is the terminology we'll use in our documentation;

• Elements are the individual items on your page that you want to dynamically hide or show. These are generally DIVs but can be essentially any HTML element type.

• Groups represent a grouping of elements. When an element is shown, all other elements in that group will be hidden.

• Triggers represent an event - usually a user event - which will change the Elements that you want to be active within a group. Most often, the trigger is another element on the page, such as a button, tab, radio button, or form select.

To understand this better, consider a simple tabs element. In this construction, the group is the entire tabs element with all of its tabs and tab panes. The elements are the individual tab panes. The tabs themselves are the triggers.

Clicking a tab hides all tab panes, and shows only the one tab pane you want.

The reason for this library is that in many page layouts, a standard tabs element would not work- the "panes" are located in different areas of the page.

Use Cases

A custom tab-style element, where clicking one element shows a content pane.

A custom accordion-style element.

Too many to really describe.

The general pattern is that you want to have a series of elements that hide/show according to specific user actions.

• The page loads with only certain element(s) visible

• When the user clicks on something e.g. a radio button, that configuration changes so that other element(s) are visible

• Dynamic forms with conditional areas

This supports CMS-driven use cases also

Usage Notes

Define your dynamic elements

To the elements you want to dynamically show and hide, add these attributes;

wfu-element-group

Specify a unique name for this element group. This will act as a context for related elements.

wfu-element-name

Specify a unique name for this element, which will allow you to identify it directly. No commas or periods.

wfu-element-default ( optional )

Indicates that this element should be displayed on page load, as a default state, before any trigger action occurs.

wfu-element-display ( optional )

Defines the CSS display type to use when the element is made visible- useful for elements that are flex or grid. Defauts to block.

? An element with a name, but no group, will be considered part of all groups

When using CMS data, a useful technique here is to assign a unique static group name, and then use Webflow's CMS-bound attributes to bind the CMS item slug as the element name attribute.

Define your triggers

Triggers are ( currently ) other elements anywhere on the page that the user can click or select, which will trigger a change in which item(s) are displayed in the element group.

wfu-element-action = select

Trigger-type aware;

• Radio buttons

• Buttons and other elements, click

Future;

• Future - Selects

• Future - Tabs

• Future - Sliders

• Code-based triggers

  • e.g. querystring checks - Use case- tracked referrer

wfu-element-target-group = (group-name)

Specify the group that you want to target.

wfu-element-target-name = (item-name)

Specify the element name you want to be visible. All other elements in the same group will be hidden.

If you want to make multiple elements visible, you can comma-separate them in this attribute.

Do not tag a single element as both an Element and as a Trigger.