Yahoo! Developer Network Home - Help

YDN Site Search

# 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.

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### TabView Control Examples:

- Build from Markup
- Build from Script
- Adding Tabs
- Removing Tabs
- Getting Content from an External Source
- Skinning TabView
- Editor inside a Tabview Control (included with examples for Rich Text Editor (beta))
- ImageLoader with TabView (included with examples for ImageLoader Utility)
- Complex Application (included with examples for Layout Manager (beta))

### More TabView Control Resources:

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

Copyright © 2008 Yahoo! Inc. All rights reserved.

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