In this post Asp.Net jQuery
UI Tab Collapse All Tabs we
shall see on how to collapse all the tabs in a collection of tabs
All the tabs can be collapsed by setting
the selected option to -1.
$("#SimpleTab").tabs("option", "selected", -1);
$("#SimpleTab").tabs("option", "selected", -1);
Full Example
Add a DIV tag SimpleTab to the page, and add the below jQuery script.
Change the references of the jQuery library files to map to your local
path.
Click the Collapse Button, notice that all the tabs get collapsed, and the tab structure gets shrinked.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery UI Tabs</title>
<link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
<script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link
type="text/css"
href="Stylesheet.css" // Add your own .css file (Optional)
rel="Stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
//
// Simple Tab
$("#SimpleTab").tabs({ collapsible: true });
//
// Tabs -
Collapse All
$('#btnCollapse').click(function(event)
{
event.preventDefault();
$("#SimpleTab").tabs("option", "selected",
-1);
});
});
</script>
</script>
</head>
<body>
<form id="frmAccordion" runat="server">
<table>
<tr valign="top">
<td>Simple Tab: </td>
<td>
<div id="SimpleTab">
<ul>
<li><a href="#tab1">Tab-1</a></li>
<li><a href="#tab2">Tab-2</a></li>
<li><a href="#tab3">Tab-3</a></li>
</ul>
<div id="tab1">
Tab-1 Content goes here.
</div>
<div id="tab2">
Tab-2 Content goes here.
</div>
<div id="tab3">
Tab-3 Content goes here.
</div>
</div>
</td>
</tr>
<tr valign="top">
<td>Tabs - Collapse </td>
<td>
<asp:Button
ID="btnCollapse"
runat="server"
Text="Collapse" />
</td>
</tr>
</table>
</form>
</body>
</html>
Related Posts
No comments:
Post a Comment