jQuery - Create accordion control in ASP.NET

The jQuery accordion widget allows the creation of collapsible panels on the page without the need for page refresh. Using an accordion control, a single panel is displayed at a time while the remaining panels are hidden.

Create a new web form accordian.aspx in the current project.

Add a main content panel to the page. Within the main panel, add pairs of headers and subpanels as shown next:

<asp:Panel id="contentArea" runat="server">
<h3><a href="#">Section 1</a></h3>
<asp:Panel ID="Panel1" runat="server">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</asp:Panel>
<h3><a href="#">Section 2</a></h3>
<asp:Panel ID="Panel2" runat="server">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</asp:Panel>
<h3><a href="#">Section 3</a></h3>
<asp:Panel ID="Panel3" runat="server">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</asp:Panel>
<h3><a href="#">Section 4</a></h3>
<asp:Panel ID="Panel4" runat="server">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</asp:Panel>
</asp:Panel>

Add some styling to the main content panel as required:

#contentArea
{
width: 300px;
height: 100%;
}

Our accordion markup is now ready. We will now transform this markup into an accordion control using the functionalities of jQuery UI.

In the document.ready() function of the jQuery script block, apply the accordion() method to the main content panel:

$("#contentArea").accordion();
Thus, the complete jQuery UI solution for the problem at hand is as follows:
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#contentArea").accordion();
});
</script>

Screenshot