In this post Asp.Net jQuery UI
Accordion
Set Active Panel we shall see on how to set the active panel 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 Set Active Panel button, notice that the 2nd panel expands, and the other panels get collapsed. Panel index is a zero based index.
<html xmlns="http://www.w3.org/1999/xhtml">
Click on Set Active Panel button, notice that the 2nd panel expands, and the other panels get collapsed. Panel index is a zero based index.
<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 - Set Active Panel
$('#btnSetActivePanel').click(function(event) {
event.preventDefault();
$("#SimpleAccordion").accordion('activate', 1);
});
});
</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
- Set Active Panel </td>
<td>
<asp:Button
ID="btnSetActivePanel"
runat="server"
Text="Set Active Panel" />
</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