Public form with Tabs Container - Show and Hide tabs

Forms Public Forms
1

Hi There,

I have a ppublic form with a Tabs Container called "Tabs1" I have two tabs "1.Terms & Conditions" and "2. Subject Details. The "1. Terms and Conditions" has a Choce field with 1 option which is "Yes" and is displayed as a check box. I want the "2. Subject detials" tab to be disabled and / or hidden until the tick box field (AgreeToTerms) is checked/ticked.

Is this possible to do in a public form? I have seen that you can do it in a Sharepoint Form and tried adapting the code but this did not work.

Thanks in advance for any help with this.

Nigel

2

Hi @Nigel_Foot,

You can follow the example from this article to hide the tab:

fd.rendered(() => {
    fd.field('Choice1').$on('change', () => {
        fd.container('Tabs1').tabs[1].disabled = fd.field('Choice1').value != 'Yes';
    });
    
    fd.container('Tabs1').tabs[1].disabled = fd.field('Choice1').value != 'Yes';
});

Don't forget to add the CSS style to hide the disabled tabs:

.fd-form .tabset.tabs-top>.nav-tabs>.nav-item>.nav-link.disabled{
    display: none; /* hide disabled tabs */
}

If that doesn't help, could you share the code that didn't work for you?

3

Hi llia,

I have now got the code to work - thank you for your reply though.

I have used this code:

fd.rendered(function() {
    // Initially disable the "2. Subject Details" tab
    fd.container('Tabs1').tabs[1].disabled = true;
// Function to enable and activate the "2. Subject Details" tab when AgreeToTerms is "Yes"
    function toggleTab() {
        const agreeToTermsValue = fd.field('AgreeToTerms').value[0];
        console.log('AgreeToTerms value:', agreeToTermsValue);

        if (agreeToTermsValue === 'Yes') {
            fd.container('Tabs1').tabs[1].disabled = false;
            fd.container('Tabs1').activeTabIndex = 1; // Make the second tab active
        } else {
            fd.container('Tabs1').tabs[1].disabled = true;
            fd.container('Tabs1').activeTabIndex = 0; // Revert to the first tab if not "Yes"
        }
    }

    // Attach the function to the change event of AgreeToTerms field
    fd.field('AgreeToTerms').$on('change', toggleTab);

    // Call the function initially to set the correct state
    toggleTab();

});

And this in the CSS Section:


.fd-form .tabset .disabled{
    display: none !important;
}

Many thanks

Nigel