Hide or disable a tab item from JS

[Miguel Varela Rodriguez]

Hi Syncfusion Team,

i have a tab control on my page, and need to disable or hide a item in some circustances.

i tries  tabObj.tabItem[0].disable .visiblity etc. but dond find the solution to disable it correctly.

here my code simplified:

html:

<div id="tabContainer">

<div class="e-tab-header">

<div><span id="tabHeaderIdea"></span></div>

<div><span id="tabHeaderProject"></span></div>

</div>

<div class="e-content">

...content tab 1

</div>

<div class="e-content">

...content tab 2

</div>

</div>

js:

var tabContainer = new ej.navigations.Tab();

tabContainer.appendTo('#tabContainer');

Thank you in advance !

[Buvana Sathasivam]

Hi Miguel, 

Thanks for using Syncfusion Products. 

We were checked your shared code.  By default, the tab component header section must be enclosed with a wrapper element using ‘e-tab-header’ class and corresponding content must be mapped to ‘e-content’ class.  But, your shared code ‘e-content’ class is added for two separate div element.  So, we suggest you can specify all tab contents inside the ‘e-content’ class element.  Please find the below code for your reference. 

Index.html 

        <div id="tabContainer">     

          <div class="e-tab-header">  // Tab header 

            <div><span id="tabHeaderIdea">Tab1</span></div> 

            <div><span id="tabHeaderProject">Tab2</span></div> 

          </div> 

          <div class="e-content">    // Tab content 

            <div>...content tab 1</div> 

            <div>...content tab 2</div> 

          </div> 

        </div> 

UG link: https://ej2.syncfusion.com/documentation/tab/getting-started.html?lang=typescript#initialize-the-tab-using-html-elements  

If you wish to disable tab items, you can use disable public method.  This method is used to disable all tab items in the tab component.  If you wish to enable the disabled tab component, you can set false to disable public method. 

If you wish to hide tab items with specific position, you can use the hideTab public method.  This method is used to hide/show tab item with a specific tab index and passed a second argument as a boolean.  Based on second arguments, you can show/hide the tab items. 

Please find the below stackblitz link for your reference. 

Stackblitz link: https://stackblitz.com/edit/rn5kw4-swvryc?file=index.js  

API links: https://ej2.syncfusion.com/documentation/tab/api-tab.html?lang=typescript#hidetab  

https://ej2.syncfusion.com/documentation/tab/api-tab.html?lang=typescript#disable  

Regards, 

Buvana S