Hello everyone ! I’m trying to create a SAAS dashboard like this one :
First, I tried to use the “Tabs” feature, but it doesn’t work in my case because the content I want to display is both specific to the tabs and general to the page (I have multiple part of a form in my different tabs, and I have a “Content Preview” (which is next to the content tabs). This UX makes the use of tabs impossible for me.
So I tried to create something myself with “Interactions”. My problem : I have 3 parts of my form (the 3 tabs), when I click on one, I want to make sure that every other is hidden, before I display the right part. So I hide the entire “Form-Part” class, but doing this prevent me to just select one “Form-Part” div and display it. I can choose to affect class OR element, but not both unfortunatly.
Any idea of how I could do that ?
it sounds like you want to show only one part of your form at a time, right?
еo do this, you can use combo classes. Here’s a simple breakdown:
-
сreate сombo сlasses: вuplicate your “Form-Part” div for each part of your form. пive each of them a combo class like “Form-Part Part1,” “Form-Part Part2,” and so on…
-
initial state: set the initial state for all combo classes to hide them. this will be your default 
-
interactions: In your interactions, set up a click trigger for each tab/button, and as an action, select “affect different element.” then you can pick the corresponding combo class (e.g., “Form-Part Part1”) and set it to display
i think this way, when you click a button, it will hide all the “Form-Part” divs and only show the one you want
and for your “сontent зreview” section, you can do a similar thing. Just make sure it’s in the same interaction or you synchronize the interactions between the tabs and the content preview.
I hope this helps you achieve the layout you’re aiming for
feel free to ask if you need more specifics or run into any hiccups 
