Displaying overlaping group with a click

Need help
1

Hi everyone,

Happy new year and thanks for this forum.
I’m trying to do something that - I’m sure - is pretty basic, but I simply couldn’t find the appropriate words when looking for old topics.

A picture is worth a thousand words…

image
image2238×1136 134 KB

image
image2212×1108 50.1 KB

What tool should I use to setup this “tab” system? Group? States? Group Focus?

Thanks in advance for your help…
Nico

2

A very basic example is:

  • Create a state that will hold the current section (can be a text)
  • create the tabs with each tab that set the state for the current tab when clicked
  • the section are groups with " this element is visible on page load" unchecked and “collapse when hidden” checked. On each section set a condition that when the current section state is the right one the element is visible
3

Okay, thanks a lot for your answer mate!!

All clear, except one question on your bullet point #3:
So if I fully use the new responsive engine, this means that the 3 groups corresponding to the 3 tabs would basically be appearing as a column (one above the other) in the editor, right? As i can’t overlap groups…

And thanks to the “Collapse when hidden” it would work, right?

4

Yes, no need to overlap the sections.
Keep them in a container group set to column layout. If you set them to collapse when not visible and show only one at a time the final effect it’s like your example

5

Ok all clear mate thank you very much :slight_smile:

6

Happy to help :slight_smile:

Cheers

Mariano

7

This topic was automatically closed after 70 days. New replies are no longer allowed.