# Disabled and Invisible Tabs in TabPanel

Learn how to disable or hide Tabs in Wijmo's TabPanel in this tutorial

## Content

The __TabPanel__ control allows the user to disable or hide individual tabs using the __isDisabled__ and __isVisible__ properties respectively. Invisible and disabled tabs cannot be selected by the user.

![TabPanel](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/nav/disabled-invisible.gif)

The code example below enables/disables the Europe tab and hides/unhides the Oceania tab based on the checkbox selection as depicted in the image above:

##### HTML
```html
  <div id="theTabPanel">
    <div>
      <a>Africa</a>
      <div>
        <ul>
          <li>Algeria</li>
          <li>Angola</li>
          <li>Benin</li>
          <li>Botswana</li>
        </ul>
      </div>
    </div>
    <div>
      <a>America</a>
      <div>
        <ul>
          <li>Canada</li>
          <li>Chile</li>
          <li>Mexico</li>
          <li>United States</li>
        </ul>
      </div>
    </div>
    <div>
      <a>Asia</a>
      <div>
        <ul>
          <li>China</li>
          <li>Korea</li>
          <li>India</li>
          <li>Japan</li>
        </ul>
      </div>
    </div>
    <div>
      <a id="tab-europe" class="wj-state-disabled">Europe</a>
      <div>
        <ul>
          <li>Austria</li>
          <li>England</li>
          <li>France</li>
          <li>Germany</li>
          <li>Netherlands</li>
          <li>Switzerland</li>
        </ul>
      </div>
    </div>
    <div>
      <a id="tab-oceania">Oceania</a>
      <div>
        <ul>
          <li>Australia</li>
          <li>Fiji</li>
          <li>New Zealand</li>
          <li>Samoa</li>
        </ul>
      </div>
    </div>
  </div>
  <div>
    <label for="disableEurope">
      Disable Europe
    </label>
    <input id="disableEurope" type="checkbox" checked>
  </div>
  <div>
    <label for="showOceania">
      Show Oceania
    </label>
    <input id="showOceania" type="checkbox" checked>
  </div>
```
##### Javascript
```javascript

import * as wjNav from '@mescius/wijmo.nav';

function init() {
    var theTabPanel = new wjNav.TabPanel('#theTabPanel');
    // toggle Europe's disabled state
    document.getElementById('disableEurope').addEventListener('click', function (e) {
        theTabPanel.getTab('tab-europe').isDisabled = e.target.checked;
    });
    // toggle Oceania's visibility
    document.getElementById('showOceania').addEventListener('click', function (e) {
        theTabPanel.getTab('tab-oceania').isVisible = e.target.checked;
    });
}
```