Home > ASP.Net, Jquery > JQuery Accordion with Data from Database

JQuery Accordion with Data from Database

Hi all,

try this Example to use JQuery Accordion with Data from Database :-

In this Example i will use Northwind Database and Categories Table

1) DownLoad the following JS files jquery-ui.js and jquery-1.4.4 from here

2) Open VS2008 and create a new Website project and add new Page “Dafault.aspx”

3) In Default.aspx add Repeater Control so our page will be like

<head runat="server">
    <title>Untitled Page</title>
    <link type="text/css" href="css/jquery-ui.css" rel="Stylesheet" />
    <script type="text/javascript" src="script/jquery-1.4.4.js"></script> 
    <script type="text/javascript" src="script/jquery-ui.js"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
    <form id="form1" runat="server">
    <div id="Categories" style="width:500px;">
        <asp:Repeater ID="Repeater1" runat="server">
                <h3><a href="#"><%# DataBinder.Eval(Container.DataItem, "CategoryName") %></a></h3>
                        <%# DataBinder.Eval(Container.DataItem, "Description") %>

and In code behind we will bind Repeater control to Data from Categories table in Database

protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
            Repeater1.DataSource = GetProducts();

    public DataTable GetProducts()
        string query = "select * from Categories";
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);
        SqlCommand cmd = new SqlCommand(query, con);
        DataTable data = new DataTable();
        SqlDataAdapter adapter = new SqlDataAdapter(cmd);
        using (con)
        return data;

3) In Web.Config file add the Connection String to Database

        <add name="NorthwindConnectionString" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True"
            providerName="System.Data.SqlClient" />

Now run your website …..Hope this helps

Good Luck

Categories: ASP.Net, Jquery
  1. Arif
    January 1, 2012 at 7:37 am

    not working

  2. yasserzaid
    January 5, 2012 at 3:49 pm

    @Arif :- did you get any error? and don’t forget to download the JS files that i used in this example in order to work with you
    and let me know… Good Luck

  3. pp
    June 28, 2012 at 3:04 am

    hi i want to show a grid inside accordion

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: