Hi @GREDDIE, got it! There may be a more elegant way to do this, but this is working for me.
Working demo
https://tutorials.tadabase.io/multi-step-form#!/show-components-based-on-step
Video instructions
JavaScript
var FORM_COMPONENT_ID = 'component_9';
var TABLE_1_ID = 'component_6';
var TABLE_2_ID = 'component_7';
var TABLE_3_ID = 'component_8';
var TABLE_4_ID = 'component_ID';
TB.render(FORM_COMPONENT_ID, function(data) {
TB.hideComponent(TABLE_2_ID);
TB.hideComponent(TABLE_3_ID);
data.ele.find('.form-navigation-page').each(function (index) {
new MutationObserver(function (mutations, observer) {
mutations.forEach(function (mutation) {
if ($(mutation.target).hasClass('active')) {
TB.hideComponent(TABLE_1_ID);
TB.hideComponent(TABLE_2_ID);
TB.hideComponent(TABLE_3_ID);
if(index === 0){
TB.showComponent(TABLE_1_ID);
} else if (index === 1){
TB.showComponent(TABLE_2_ID);
} else if(index === 2) {
TB.showComponent(TABLE_3_ID);
} else if(index === 3){
TB.showComponent(TABLE_4_ID);
}
}
});
}).observe(this, {
attributes: true,
attributeFilter: ['class']
});
});
});