YUI Library Examples: TabView Control: Removing Tabs

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:


1	<div id="demo" class="yui-navset">
2	<ul class="yui-nav">
3	<li><a href="#tab1"><em>Tab One Label</em></a></li>
4	<li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
5	<li><a href="#tab3"><em>Tab Three Label</em></a></li>
6	</ul>
7	<div class="yui-content">
8	<div id="tab1"><p>Tab One Content</p></div>
9	<div id="tab2"><p>Tab Two Content</p></div>
10	<div id="tab3"><p>Tab Three Content</p></div>
11	</div>
12	</div>
	view plain \| print \| ?

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


1	<script type="text/javascript">
2	var tabView = new YAHOO.widget.TabView('demo');
3	</script>
	view plain \| print \| ?

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


1	<script type="text/javascript">
2	var removeTab = function() {
3	tabView.removeTab(tabView.get('activeTab'));
4	};
5	</script>
6	<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>
7	<textarea name="code" class="JScript" cols="60" rows="1">
8	<script>
9	var button = document.createElement('button');
10	button.innerHTML = 'remove tab';
11
12	YAHOO.util.Event.on(button, 'click', removeTab);
13	tabView.appendChild(button);
14	</script>
	view plain \| print \| ?

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

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