I would like to create something similar to the photo, I've attached. The content below the menu changes accordingly to the menu item selected. For example, in picture it shows data for the ABS menu item. If you select another, it shows data for another.
Thanks.
Great, glad it works. :)
It's working without any errors. Thanks for your help.
Hey, @Tova (Wix) Can you please also add code for highlighting box ? I've added the code $w("#AB").style.backgroundColor = "black"; but it stays even after the click or I click on another button.
$w.onReady(function () { $w("#AB").onClick(() => { $w("#AB").style.backgroundColor = "black"; $w('#A').changeState("Full"); }); $w("#BB").onClick(() => { $w("#BB").style.backgroundColor = "black"; $w('#A').changeState("Empty"); }); });
Thanks ,
Shivam
Hey @Shivam Patel,
You can accomplish this functionality using multi-state boxes.
Add a multi-state box to your page. Add a state to the multi-state box for each tab's content. Add images, text, etc. to each state.
Right above your multi-state box, add a button for each tab.
Add code so that when a site visitor clicks a tab, the multi-state box switches to the corresponding state, displaying the matching content. Your code will look something like this:
$w("#absButton").onClick(() => { $w('#myStatebox').changeState("absState"); } ); $w("#absLikeButton").onClick(() => { $w('#myStatebox').changeState("absLikeState"); } ); $w("#accura25Button").onClick(() => { $w('#myStatebox').changeState("accura25State"); } ); // etc.
You can also add code to each onClick() function to highlight the tab button that was clicked.
HTH,
Tova