In this post Asp.Net jQuery UI
Accordion
Collapse All we shall see on how collapse all the panels in an
Accordion.
Add a DIV tag SimpleAccordion to the page, and add the below jQuery script. Change the references of the jQuery
library files to map to your local path.
Click on Collapse button, notice that all the open panels get collapsed. Make sure that the collapsible property is set to true while creating the Accordion.
<html xmlns="http://www.w3.org/1999/xhtml">
Click on Collapse button, notice that all the open panels get collapsed. Make sure that the collapsible property is set to true while creating the Accordion.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery UI Accordion</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() {
$("#SimpleAccordion").accordion(
{
collapsible: true,
active:
false
});
//
//
Accordion - Collapse All
$('#btnCollapse').click(function(event)
{
event.preventDefault();
$("#SimpleAccordion").accordion('activate', false);
});
});
</script>
</script>
</head>
<body>
<form id="frmAccordion" runat="server">
<table>
<tr valign="top">
<td>Simple
Accordion: </td>
<td>
<div id="SimpleAccordion">
<h1><a href="#" id="A4">Header
1</a></h1>
<div>This is
the content of Section - 1</div>
<h1><a href="#" id="A5">Header 2</a></h1>
<div>This is
the content of Section - 2</div>
<h1><a href="#" id="A6">Header 3</a></h1>
<div>This is
the content of Section - 3</div>
</div>
</td>
</tr>
<tr valign="top">
<td>Accordion
- Collapse </td>
<td>
<asp:Button
ID="btnCollapse"
runat="server"
Text="Collapse" />
</td>
</tr>
</table>
</form>
</body>
</html>
For a full example covering all possible scenarios in using a jQuery UI Autocomplete control refer to the post Asp.net jQuery UI Accordion Tutorial
Related Posts
No comments:
Post a Comment