YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: TabView Control: Removing Tabs

# TabView Control: Removing Tabs

This demonstrates how to dynamically remove tabs from a TabView widget.

View example in new window.

Tab One Content

Tab Two Content

Tab Three Content

## Removing Tabs from a TabView

Dynamically removing tabs from a YUI TabView widget is done with the `removeTab` method.

We will create a `<div>` called `demo` and include the TabView markup:

<div id="demo" class="yui-navset"> <ul class="yui-nav"> <li><a href="#tab1"><em>Tab One Label</em></a></li> <li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li> <li><a href="#tab3"><em>Tab Three Label</em></a></li> </ul> <div class="yui-content"> <div id="tab1"><p>Tab One Content</p></div> <div id="tab2"><p>Tab Two Content</p></div> <div id="tab3"><p>Tab Three Content</p></div> </div> </div>

Next, create an instance of TabView from our `demo` element:

<script type="text/javascript"> var tabView = new YAHOO.widget.TabView('demo'); </script>

Next we will write a function that removes the active tab:

<script type="text/javascript"> var removeTab = function() { tabView.removeTab(tabView.get('activeTab')); }; </script> <p>A button will be used to trigger the tab removal. Here we create it, and assign a click listener that calls our removeTab function when the button is clicked:</p> <textarea name="code" class="JScript" cols="60" rows="1"> <script> var button = document.createElement('button'); button.innerHTML = 'remove tab'; YAHOO.util.Event.on(button, 'click', removeTab); tabView.appendChild(button); </script>

This is a basic example of the TabView's addTab method.

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### TabView Control Examples:

### More TabView Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings