Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jQuery accordion using repeater control

Suggested Videos
Part 72 - Autocomplete textbox using jquery in
Part 73 - Autocomplete textbox using jquery and web service
Part 74 - jQuery accordion in

In this video we will discuss implementing an accordion in webforms application using repeater control and jQuery. This is continuation to Part 74, in which we we have implemented accordion by building h3 and div element pairs using jQuery. We can offload this responsibility to the repeater control.

Steps to modify the example in Part 74, to use repeater control

Step 1 : Add a reference to the ASMX web service

a) In the Solution Explorer, right click on the project and select Add > Service Reference
b) In the Add Service Reference dialog box, click the Discover button. This should discover the CountryService.asmx
c) In the Namespace textbox, type Services and click OK

jQuery accordion using repeater control

Step 2 : Add a new WebForm to the project. Copy and paste the following code in the code-behind file

using System;
namespace Demo
    public partial class WebForm1 : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)
            Services.CountryServiceSoapClient client = new
            Repeater1.DataSource = client.GetCountries();

            ListView1.DataSource = client.GetCountries();

Step 3 : Copy and paste the following HTML and jQuery code in the ASPX page

<%@ Page Language="C#" AutoEventWireup="true"
    CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %>

<!DOCTYPE html>
<html xmlns="">
<head runat="server">
    <script src="jquery-1.11.2.js"></script>
    <script src="jquery-ui.js"></script>
    <link href="jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
    <form id="form1" runat="server">
        <div id="accordion" style="width: 600px">
            <asp:Repeater ID="repeaterCountries" runat="server">
                        <%#Eval("Name") %>
                        <%#Eval("CountryDescription") %>

Please note : You can also use the ASP.NET ListView control instead of Repeater control.

jQuery tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.