You can learn from my previous JQuery articles:

Step by step implementation of JQuery UI Accordion.

  1. Create a new ASP.NET Web Site Project.

    Click File, then New Web Site.

    Web Site Project

    Created a ASP.NET web site project named JqueryUIAccordion.

  2. Right click on project.

    Add, Add New Item, then name WebForm as Default.aspx:

    WebForm

  3. You can download from JQueryUI website, Downloaded Jquery-ui-1.11.4custom.zip file; download zip in your drive.

    download zip

  4. Add the above mentioned three files into your project after zip is extracted.

    I had created two folder:

    1. Styles: In style folder we will keep all CSS files.

    2. Scripts: In scripts folder we will keep all JS files.
     
    Right click on Project (Solution Explorer) - Add, Existing Item, then select the following files from your extracted folder.

    Jquery-ui.css - Add this file inside Styles folder.

    Jquery-1.11.3.min.js - Add this file inside Scripts folder.

    Jquery-ui.js - Add this file inside Scripts folder.

    JqueryUI

  5. Given reference in Default.aspx file.
    1. <link href="styles/jquery-ui.css" rel="stylesheet" />
    2. <script src="scripts/jquery-1.11.3.min.js"></script>
    3. <script src="scripts/jquery-ui.js"></script>
  6. How to bind repeater control?

    Please refer the following link.

  7. Default.aspx page drag & drop Repeater control on it.

  8. Set Connection string in web.config file.
    1. <connectionStrings>
    2. <add name="MemberCDACConnectionString" connectionString="Data Source=SAIBABA-PC\SAIBABA;Initial Catalog=MemberCDAC;Integrated Security=True" providerName="System.Data.SqlClient"/>
    3. </connectionStrings>
  9. Table structure of tblMembers table.
    1. GO
    2. /****** Object: Table [dbo].[tblMembers] Script Date: 01/29/2016 22:50:34 ******/
    3. SET ANSI_NULLS ON
    4. GO
    5. SET QUOTED_IDENTIFIER ON
    6. GO
    7. CREATE TABLE [dbo].[tblMembers](
    8. [MemberID] [int] IDENTITY(1,1) NOT NULL,
    9. [Name] [nvarchar](50) NULL,
    10. [address] [nvarchar](500) NULL,
    11. [place] [nvarchar](50) NULL,
    12. [joindate] [datetime] NULL,
    13. CONSTRAINT [PK_tblMembers] PRIMARY KEY CLUSTERED
    14. (
    15. [MemberID] ASC
    16. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
    17. ) ON [PRIMARY]
  10. Sample data of Table

    Table

    Above data we are going to display in ACCORDION.
     
  11. Default.aspx page code.
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    2. <!DOCTYPE html>
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    5. <head runat="server">
    6. <link href="styles/jquery-ui.css" rel="stylesheet" />
    7. <script src="scripts/jquery-1.11.3.min.js"></script>
    8. <script src="scripts/jquery-ui.js"></script>
    9. <script type="text/javascript">
    10. $(function ()
    11. {
    12. $("#MyAccordion").accordion();
    13. });
    14. </script>
    15. <title>JqueryUI Accordion</title>
    16. </head>
    18. <body>
    19. <form id="form1" runat="server">
    20. <div id="MyAccordion" style="width:50%">
    21. <asp:Repeater ID="rptMembers" runat="server">
    22. <ItemTemplate>
    23. <h3>
    24. <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label></h3>
    25. <div>
    26. <p>
    27. <table>
    28. <tr>
    29. <td> <b>Member ID :</b>
    30. <asp:Label ID="lblMemberID" runat="server" Text='<%# Eval("MemberID")%>'></asp:Label> <br /> <b>Friend Name :</b>
    31. <asp:Label ID="lblMemberName" runat="server" Text='<%# Eval("Name") %>'></asp:Label> <br /> <b>Address :</b>
    32. <asp:Label ID="lblAddress" runat="server" Text='<%# Eval("Address") %>'></asp:Label> <br /> <b>Place :</b>
    33. <asp:Label ID="lblPlace" runat="server" Text='<%# Eval("Place") %>'></asp:Label> <br /> <b>Join Date :</b>
    34. <asp:Label ID="lblJoinDate" runat="server" Text='<%# Eval("Joindate","{0:dd/MM/yyyy}") %>'></asp:Label> <br /> </td>
    35. </tr>
    36. </table>
    37. </p>
    38. </div>
    39. </ItemTemplate>
    40. </asp:Repeater>
    41. </div>
    42. </form>
    43. </body>
    45. </html>
  12. Default.aspx.cs code:

    ADO.NET code to fetch data from Microsoft SQL Server database.
    1. using System;
    2. using System.Collections.Generic;
    3. using System.Configuration;
    4. using System.Data;
    5. using System.Data.SqlClient;
    6. using System.Linq;
    7. using System.Web;
    8. using System.Web.UI;
    9. using System.Web.UI.WebControls;
    10. public partial class _Default: System.Web.UI.Page
    11. {
    12. string ConStr = ConfigurationManager.ConnectionStrings["MemberCDACConnectionString"].ConnectionString;
    13. protected void Page_Load(object sender, EventArgs e)
    14. {
    15. SqlConnection con = new SqlConnection(ConStr);
    16. SqlDataAdapter da = new SqlDataAdapter("Select * From tblMembers", ConStr);
    17. DataSet ds = new DataSet();
    18. da.Fill(ds, "FriendTable");
    19. rptMembers.DataSource = ds;
    20. rptMembers.DataBind();
    21. }
    22. } 
  13. Result:

    Result

    Run