Tuesday, July 17, 2012

Asp.Net jQuery UI Accordion Tutorial


The jQuery UI library provides a useful Accordion control which can be plugged in into out forms, the jQuery UI Accordion can be used with a group of div tags to display the information in scrolling panels.

In the following example I have tried to cover all the possible scenarios which we come across while using an jQuery UI Accordion control.



Running the sample
To run the sample at your desk, create a new Asp.net page; edit the .aspx page, copy the code below into the .aspx page, change reference of the jQuery & jQuery UI files to point to your local directory. Build and run the application, see the behavior of each of the Accordion controls.

Code
<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">
        // Simple Accordion
        $(document).ready(function() {
            $("#SimpleAccordion").accordion(
            {
                collapsible: true,
                active: false
            });
            //
            // Accordion - Set Active Panel
            $('#btnSetActivePanel').click(function(event) {
                event.preventDefault();
                $("#SimpleAccordion").accordion('activate', 1);
            });
            //
            // Accordion - Get Active Panel
            $('#btnGetActivePanel').click(function(event) {
                event.preventDefault();
                alert($("#SimpleAccordion").accordion("option", "active"));
            });
            //
            // Accordion - Collapse All
            $('#btnCollapse').click(function(event) {
                event.preventDefault();
                $("#SimpleAccordion").accordion('activate', false);
            });
            //
            // Accordian - Icon
            $("#iconAccordion").accordion(
            {
                collapsible: true,
                active: false,
                icons:
{
"header": "ui-icon-locked",
"headerSelected": "ui-icon-key"
}
            });
            //
            // Accordian - Animate
            $("#animateAccordion").accordion(
            {
                collapsible: true,
                active: false,
                animated: "easeInElastic"
            });
            //
            // Accordian - Event
            $("#eventAccordion").accordion(
            {
                collapsible: true,
                active: false,
                change: function(event, ui) {
                    alert('Selected Panel Index: ' + $(this).accordion("option", "active"));
                    alert('Selected Panel HeaderId: ' + ui.newHeader.find("a").attr("id"));
                }
            });           
        });
      </script>   
</head>
<body>
    <form id="frmAccordion" runat="server">
        <table>
            <tr valign="top">
                <td>Simple Accordion: </td>
                <td>
                    <div id="SimpleAccordion">
                        <h1><a href="#" id="A1">
Header 1</a></h1>
                          <div>
This is the content of Section - 1</div>
                          <h1><a href="#" id="A2">
Header 2</a></h1>
                          <div>
This is the content of Section - 2</div>
                          <h1><a href="#" id="A3">
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> 
            <tr valign="top">
                <td>Accordion - Get Active Panel </td>
                <td>
                    <asp:Button
ID="btnGetActivePanel"
runat="server"
Text="Get Active Panel" />
                </td>               
            </tr> 
            <tr valign="top">
                <td>Accordion - Collapse </td>
                <td>
                    <asp:Button
ID="btnCollapse"
runat="server"
Text="Collapse" />
                </td>               
            </tr>  
            <tr valign="top">
                <td>Accordion - Icons</td>
                <td>
                    <div id="iconAccordion">
                        <h1><a href="#" id="A1">
Header 1</a></h1>
                          <div>
This is the content of Section - 1</div>
                          <h1><a href="#" id="A2">
Header 2</a></h1>
                          <div>
This is the content of Section - 2</div>
                          <h1><a href="#" id="A3">
Header 3</a></h1>
                          <div>
This is the content of Section - 3</div>
                    </div>
                </td>               
            </tr> 
            <tr valign="top">
                <td>Accordion - Animate</td>
                <td>
                    <div id="animateAccordion">
                        <h1><a href="#" id="A1">
Header 1</a></h1>
                          <div>
This is the content of Section - 1</div>
                          <h1><a href="#" id="A2">
Header 2</a></h1>
                          <div>
This is the content of Section - 2</div>
                          <h1><a href="#" id="A3">
Header 3</a></h1>
                          <div>
This is the content of Section - 3</div>
                    </div>
                </td>               
            </tr>  
            <tr valign="top">
                <td>Accordion - Event</td>
                <td>
                    <div id="eventAccordion">
                        <h1><a href="#" id="A1">
Header 1</a></h1>
                          <div>
This is the content of Section - 1</div>
                          <h1><a href="#" id="A2">
Header 2</a></h1>
                          <div>
This is the content of Section - 2</div>
                          <h1><a href="#" id="A3">
Header 3</a></h1>
                          <div>
This is the content of Section - 3</div>
                    </div>
                </td>               
            </tr>                                          
         </table>              
    </form>
</body>

Search Flipkart Products:
Flipkart.com