Hide a Table when a particular Form Step is selected

Hi All, I’ve designed my main app screen with the open record taking up two thirds of the width of the screen, from the left, with a number of joined tables appearing down the right side of the screen.

My main record utilises Steps (tabs) and this is a great way to unclutter the screen but I wondered if it’s possible with CSS to hide tables based on what step/tab is selected?

@Chem would you be able to confirm please?

@GREDDIE are you discussing the use of these tabs or Form Component Steps?

Hi @Chem , these Steps on a Form component…

I have a number of tables I display on the right and it would be great to display only those relating to the current tab / “step”.


Hi @GREDDIE, got it! There may be a more elegant way to do this, but this is working for me.

Working demo

Video instructions


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) {
    data.ele.find('.form-navigation-page').each(function (index) {
        new MutationObserver(function (mutations, observer) {
            mutations.forEach(function (mutation) {
                if ($(mutation.target).hasClass('active')) {
                    if(index === 0){
                    } else if (index === 1){
                    } else if(index === 2) {

                    } else if(index === 3){
        }).observe(this, {
            attributes: true,
            attributeFilter: ['class']

Hey @Chem this looks very promising thank you ! I’ll implement tomorrow morning and post some feedback ! I really appreciate you taking the time, thank you…

1 Like

@Chem it works perfectly thank you soooo much ! :slight_smile:

In my opinion, this really takes the form’s “Steps” to the next level and makes this function more like a wizard - superb! :star: :star: :star: :star: :star:

Mini-tip for anyone else especially if you have a lot of tables / tabs, as in my case I actually had 9 tables and 5 tabs so I copied a full list of all the tables into each “if” section and simply remarked out the ones I wanted to hide. I found this simple but very useful, so I could easily toggle and change configuration as I was building it out…


1 Like

This is amazing. Thanks so much for figuring this out Chem. As @GREDDIE said this takes forms to a whole new level.

I was playing with iframes to include tables and other resources in the form itself but was running into issues because formatting, CORS, etc. I switched to seeing if I could do something like this then found this post and was able to fully execute what I wanted.