Dynamic Jquery Accordion using Repeater in Asp .Net

In this article we will see how to create dynamic Jquery repeater using database in Asp .net.  Jquery accordion is very helpful when you want to show information in collapsible content panels. When you click any header of the accordion it will expand and display related content.

Let's Begin:

Step1: First of all we need to reference Jquery scripts and Jquery CSS into our project. For this we will use Jquery CDN (Content delivery network) this will increase performance.

Paste these between your <head></head> section or you can also place before </body> section of your page. 

 

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function () {
            var icons = {
                header: "ui-icon-circle-arrow-e",
                activeHeader: "ui-icon-circle-arrow-s"
            };
            $("#accordion").accordion({
                icons: icons
            });
            $("#toggle").button().click(function () {
                if ($("#accordion").accordion("option", "icons")) {
                    $("#accordion").accordion("option", "icons", null);
                } else {
                    $("#accordion").accordion("option", "icons", icons);
                }
            });
        });
    </script>

 

Step2: Lets create some data to bind into our Jquery Accordion. For this example I am using DataTable but you can also use database. If you want to try with DataTable add NameSpace "using System.Data".

//using System.Data;
    public DataTable createDataTable()
    {
        DataTable dt = new DataTable();
        DataColumn dc = new DataColumn();
        dc.ColumnName = "Name";
        dc.DataType = typeof(string);
        dt.Columns.Add(dc);

        dc = new DataColumn();
        dc.ColumnName = "Description";
        dc.DataType = typeof(string);
        dt.Columns.Add(dc);

        dc = new DataColumn();
        dc.ColumnName = "Email";
        dc.DataType = typeof(string);
        dt.Columns.Add(dc);

        dc = new DataColumn();
        dc.ColumnName = "Phone";
        dc.DataType = typeof(string);

        dt.Columns.Add(dc);

        dt.Rows.Add(new object[] { "Max", "Hello my name is Max and I am software engineer.", "Demo@Gmail.com", "My Phone is 123456789" });
        dt.Rows.Add(new object[] { "Albert", "Hello my name is Albert and I am software engineer.", "Demo@Gmail.com", "My Phone is 123456789" });
        dt.Rows.Add(new object[] { "Destin", "Hello my name is Destin and I am software engineer.", "Demo@Gmail.com", "My Phone is 123456789" });
        dt.Rows.Add(new object[] { "Jessie", "Hello my name is Jessie and I am software engineer.", "Demo@Gmail.com", "My Phone is 123456789" });
        dt.Rows.Add(new object[] { "Joe", "Hello my name is Joe and I am software engineer.", "Demo@Gmail.com", "My Phone is 123456789" });
        

        return dt;

    }
 
Step3: Now we will create JQuery Accordion using repeater control. First of all lets understand HTML used to create accordion.

Jquery-dynamic-Accordion-in-asp-net-codingfusion 

From above image we can understand that to create dynamic accordion using repeater we need 
1) DIV with id="accordion"
2) h3 Tags for accordion Header.
3) Another DIV inside accordion DIV for content.
 
<div id="accordion" style="width: 500px;">
        <asp:Repeater ID="repAccordian" runat="server">
            <ItemTemplate>
                <h3>
                    <%#Eval("Name") %></br></h3>
                <div>
                    <table>
                        <tr>
                            <td>
                                <b>Description</b>
                            </td>
                            <td>
                                <%#Eval("Description") %>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>Email</b>
                            </td>
                            <td>
                                <%#Eval("Email") %>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>Phone</b>
                            </td>
                            <td>
                                <%#Eval("Phone") %>
                            </td>
                        </tr>
                    </table>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>

 

Step 4: Create method to retrieve data from DataTable and bind into repeater.

 public void createAccordianUsingRepeater()
    {
        repAccordian.DataSource = createDataTable();
        repAccordian.DataBind();
    }

Step5: Finally bind repeater on Page_Load()

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            createAccordianUsingRepeater();
        }
    }

Final Output:
 Jquery-Dynamic-Accordion-Using-Repeater-Asp-net-CodingFusion

 
We are nothing without our users ! You can help us offer even more high quality content. Please share our page !
Best quality Asp .Net Ajax Control Toolkit tutorials.
I need submenu and also want to click that submenu and open corresponding page. and fill submenu and menu from database
18-Dec-2013 From  Annu
Hi Annu thanks for your comment. So you want to generate sub menu inside accordion??? Do you want submenu also as accordion??.... You can use contactus page to connect me with complete details I'll try to help.
21-Dec-2013 From  Anuj
In my scenario im pulling out cities, how can I group this by city? new york city dallas Las Vegas and then show contact information for that city?
23-Dec-2013 From  Mike
Sir i want to work this out with Gridview can you please suggest me how to implement it with gridview
29-Jan-2014 From  Pratik
Hi Partik. Why do you want to use gridview? As it is very easily done by using repeater. I have never tried it with Gridview.
9-Feb-2014 From  Anuj
Very thanks bro. :)
31-Mar-2014 From  Metin
Hi, How to collapse/hide the menu, if there is only one memu item?
5-Apr-2014 From  Torben Lucassen
Hi Torben Lucassen, I have never seen such a working example.
6-Apr-2014 From  Anuj
Hi, Thanks for this sample. It works perfect! I need to take this further and add a new accordion panel dynamically every time a user clicks an Add button. I'm not able to do that due to postback issues. When I click Add it refreshes the page and creates only one pane overwriting the previous ones. Any ideas?
7-Dec-2014 From  Jtech
Hi, Thanks for this sample. It works perfect! I need to take this further and add a new accordion panel dynamically every time a user clicks an Add button. I'm not able to do that due to postback issues. When I click Add it refreshes the page and creates only one pane overwriting the previous ones. Any ideas?
8-Dec-2014 From  Jtech
Hi Anuj, How do you open a specific tab, and also have them all closed by default. Thanks
12-Jan-2015 From  Lamla

Give your valuable comments.

Name
Email
Comment
5 + 7 =
 
About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2019 CodingFusion
75 Important SQL Server queries you should know