Asp.Net jQuery UI Accordion Example

Tuesday, July 17, 2012

Asp.Net jQuery UI Accordion Example

In this post Asp.Net jQuery UI Accordion Example we shall see on how to create a simple Accordion using jQuery and associate it with a set of DIV tags in an Asp.net page.

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.

Notice that the content in the DIV tags are now displayed in a set of scrolling accordion panels.

<html xmlns="http://www.w3.org/1999/xhtml">

<title>jQuery UI Accordion</title>

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" />

$(document).ready(function() {

// Simple Accordion

$("#SimpleAccordion").accordion(

{

collapsible: true,

active: false

});

});
</script>

</head>

<body>

<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>

</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

Asp.net jQuery UI Accordion Tutorial

Asp.net jQuery UI Accordion Example

Asp.net jQuery UI Accordion Get Active Panel

Asp.net jQuery UI Accordion Set Active Panel

Asp.net jQuery UI Accordion Collapse all

Asp.Net jQuery UI Accordion Icons