The tab name inside the ribbon that should not be toggled

Question

When I click on a perticular tab, then it needs to be toggled to reveal the name of the object I have. your text

<Control xsi:type="Menu" id="autoColordwn">
                  <Label resid="autoColor.Labeldwn"/>
                  <Supertip>
                    <Title resid="autoColor.Label"/>
                    <Description resid="autoColor.Tooltip"/>
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="autoColor_16x16" />
                    <bt:Image size="32" resid="autoColor_32x32" />
                    <bt:Image size="80" resid="autoColor_80x80" />
                  </Icon>
                  <Items>
                    <Item id="autocolorEnable">
                      <Label resid="autoColor.first"/>
                      <Supertip>
                        <Title resid="autoColor.Label" />
                        <Description resid="autoColor.Tooltip" />
                      </Supertip>
                      <Icon>
                        <bt:Image size="16" resid="autoColor_16x16" />
                        <bt:Image size="32" resid="autoColor_32x32" />
                        <bt:Image size="80" resid="autoColor_80x80" />
                      </Icon>
                      <Action xsi:type="ExecuteFunction">
                        <FunctionName>AutoColorEnable</FunctionName>
                      </Action>
                    </Item>
                    <Item id="AutocolorSection">
                      <Label resid="autoColor.Second"/>
                      <Supertip>
                        <Title resid="autoColor.Label" />
                        <Description resid="autoColor.Tooltip" />
                      </Supertip>
                      <Icon>
                        <bt:Image size="16" resid="tpicon_16x16" />
                        <bt:Image size="32" resid="tpicon_32x32" />
                        <bt:Image size="80" resid="tpicon_80x80" />
                      </Icon>
                      <Action xsi:type="ExecuteFunction">
                        <FunctionName>AutoColorSelection</FunctionName>
                      </Action>
                    </Item>
                    <Item id="AutocolorSheet">
                      <Label resid="autoColor.Thrd"/>
                      <Supertip>
                        <Title resid="autoColor.Label" />
                        <Description resid="autoColor.Tooltip" />
                      </Supertip>
                      <Icon>
                        <bt:Image size="16" resid="autoColor_16x16" />
                        <bt:Image size="32" resid="autoColor_32x32" />
                        <bt:Image size="80" resid="autoColor_80x80" />
                      </Icon>
                      <Action xsi:type="ExecuteFunction">
                        <FunctionName>AutoColorSheet</FunctionName>
                      </Action>
                    </Item>
                  </Items>
                </Control>
<Resources>
      <bt:ShortStrings>
        <bt:String id="autoColor.Label" DefaultValue="Auto Color"/>
        <bt:String id="autoColor.Labeldwn" DefaultValue="Auto Color"/>
        <bt:String id="autoColor.first" DefaultValue="Auto Color Disabled"/>
        <bt:String id="autoColor.Second" DefaultValue="Auto Color Selection"/>
        <bt:String id="autoColor.Thrd" DefaultValue="Auto Color Active Sheet"/>
      </bt:ShortStrings>
</Resources>

///This is the javascript code 
// Set your initial state
        let autoColorToggle = true;

        async function AutoColorEnable(event) {
            console.log("AutoColor Enable", event);
            //AutoColorEnableDesable();
            const sel = document.querySelectorAll('[role="presentation"]');
            console.log(sel)

            autoColorToggle = !autoColorToggle;

            Office.ribbon.requestUpdate({
                tabs: [
                    {
                        id: "autocolorEnable1",
                        visible: false,
                    },
                    {
                        id: "autocolorEnable2",
                        visible: true,
                    },
                ],
                controls: [
                    {
                        id: "autocolorEnable1",
                        visible: false,
                    },
                    {
                        id: "autocolorEnable2",
                        visible: true,
                    },
                ]
            });
            event.completed();
        }

In the above xml code i have an item which name is "Auto Color Disabled" and when i click on this button then the name will be changed like "Auto Colour Disabled" to "Auto Colour Enabled" and vice versa like toogle.