Tuesday, July 17, 2012

Asp.Net jQuery UI Accordion Icons


In this post Asp.Net jQuery UI Accordion Icons we shall see on how to change the icons displayed in the header of the Accordion panels.

Add a DIV tag iconAccordion to the page, and add the below jQuery script. Change the references of the jQuery library files to map to your local path. 




Notice that the accordion gets displayed with icons as specified in the icons property while creating the icons. Refer to the .css file
jquery-ui-1.8.21.custom.css, to get a list of other icons which can be used.

<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() {
            //
            // Accordian - Icon
            $("#iconAccordion").accordion(
            {
                collapsible: true,
                active: false,
                icons:
{
"header": "ui-icon-locked",
"headerSelected": "ui-icon-key"
}
            });
});
</script>
</head>
<body>
    <form id="frmAccordionrunat="server">
        <table>
            <tr valign="top">
                <td>Accordion - Icon: </td>
                <td>
                    <div id="iconAccordion">
                        <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>
  </table>
    </form>
</body>
</html>

Search Flipkart Products:
Flipkart.com

No comments: