Hide or highlight Tabs based the value of a field when the form is loaded

Hello I'm new here and wondered if you could help me with my first project. I have 4 tabs I would like to highlight the tab that relates to the value in a field when the form is loaded for example. If the field Reason for Change = Salary highlight tab Change of Role in Blue. Alternatively hide the other tabs and show only the relevant tab Change of role. Hope you can help.

Dear @Heathaze,
Took a bit more time than expected, but you can find an example here - TabJavaScript

Here's the code that I've used, adjusted for SharePoint:

fd.spRendered(function () {
    //highlight when tab switches
    fd.container('Tabs1').$watch('currentTab', function() { 
    }) ;
    //highlight when dropdown changes
    fd.field('Highlight').$on('change', function(value) {
    //highlight on opening

function highligth_or_hide_tabs(value){
    if(value == 'Hide tabs 1 & 2'){
        //disabled tabs are hidden with CSS
        fd.container('Tabs1').tabs[0].disabled = true;
        fd.container('Tabs1').tabs[1].disabled = true;
        //set current tab to enabled one
        fd.container('Tabs1').tabs[0].disabled = false;
        fd.container('Tabs1').tabs[1].disabled = false;
            var tabs = fd.container('Tabs1').$el;
            var tab1 = $(tabs).find('.nav-tabs .nav-item')[0];
            var tab1_link = $(tab1).find('.nav-link');
            var tab2 = $(tabs).find('.nav-tabs .nav-item')[1];
            var tab2_link = $(tab2).find('.nav-link');
            var tab3 = $(tabs).find('.nav-tabs .nav-item')[2];
            var tab3_link = $(tab3).find('.nav-link');
            //reset the previous highlight
            if(value == 'Tab 1'){
            else if(value == 'Tab 2'){
            else if(value == 'Tab 3'){
        }, 100)
1 Like

Thank you this is great, I have got it to work to an extent, do you have the css for the formatting I can't seem to replicate your demo. Your help is appreciated.

Dear @Heathaze,
Yes, of course, forgot to include :sweat_smile: Here it is:

.tabset .disabled{
    display: none; /* hide disabled tabs */

.fd-form .nav-tabs .nav-link.highlight{
    background: crimson;
    color: white;

.fd-form .nav-tabs .nav-link.active.highlight{
    background: gold;
    color: white;

You have been very helpful thank you again.

1 Like