How to create Tab Driven Content ?

Ask the community
,
1

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.

1222×341 42.2 KB

2

Hey @shivamr1194 ,
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

3

Thank you so much. It works well !

4

Hey, @talyaro

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

5

Great, I’m glad it works.

Yes, to handle the button highlight, you also need to remove the highlighted color when a new button is clicked. You can do this in the onClick() function, but it’s more efficient to just use the MultiStateBox onChange() event handler.

Let’s say the buttons are normally black and you want the highlighted button to be yellow. Set the first button (currently displayed) to be yellow and the remaining as black. Then add the following code, which will run every time the state changes:
(I’m using the same names as the scenario above)

$w("#myStatebox").onChange((event) => {
  // Add all button names to this array
  const buttonNames = ["abs", "absLike", "accura25"]; 
  buttonNames.forEach(buttonName => {
    let button = $w("#" + buttonName + "Button"); // for example, $w(#absButton)
    let state = buttonName + "State"; // for example, absState
    if (event.target.currentState.id === state) {
      button.style.backgroundColor = "yellow";
    } else {
      button.style.backgroundColor = "black";
    } 
  });
});
6

Hey, @Tova (Wix)

Sorry to bothering again but I’m not from programming background. I’ve tried your code but something is not working well. I’m not sure about the blue colored section.

My statebox id is #A. The button IDs are FDM, SLS, SLA, PJ, DMLS and respective state ids are SFDM, SSLS, SSLA, SPJ, SDMLS.

$w( “#A” ).onChange((event) => {
// Add all button names to this array
const buttonNames = [ “FDM” , “SLS” , “SLA” , “PJ” , “DMLS” ];
buttonNames.forEach(buttonName => {
let button = $w(“#” + buttonName + “Button”); // for example, $w(#absButton)
let state = buttonName + “State”; // for example, absState
if (event.target.currentState.id === state) {
button.style.backgroundColor = “yellow” ;
} else {
button.style.backgroundColor = “black” ;
}
});
});

Appreciated your help.

7

Hey @shivamr1194 ,
No problem. In your case the code should be as follows:

$w("#A").onChange((event) => {
  const buttonNames = ["FDM", "SLS", "SLA", "PJ", "DMLS"];   
  buttonNames.forEach(buttonName => { 
    let button = $w("#" + buttonName);    
    let state = "S" + buttonName; 
    if (event.target.currentState.id === state) {      
      button.style.backgroundColor = "yellow";    
    } else {      
      button.style.backgroundColor = "black";    
    }   
  });
});

And of course you can change the background colors to whatever you want.
HTH,
Tova

8

It’s working without any errors. Thanks for your help.

9

Great, glad it works. :slight_smile: