Tuesday, July 17, 2012

Asp.Net jQuery UI Accordion Get Active Panel


In this post Asp.Net jQuery UI Accordion Get Active Panel we shall see on how to get the index of the currently 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 Get Active Panel button, notice that the index of the currently panel is displayed in a message box.

<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
            $('#btnGetActivePanel').click(function(event) {
                event.preventDefault();
                alert($("#SimpleAccordion").accordion("option", "active"));
            });
});
</script>
</head>
<body>
    <form id="frmAccordionrunat="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 - Get Active Panel </td>
                <td>
                    <asp:Button
ID="btnGetActivePanel"
runat="server"
Text="Get Active Panel" />
                </td>               
            </tr>
  </table>
    </form>
</body>
</html>

Search Flipkart Products:
Flipkart.com

No comments: