jQuery accordion in asp net

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this video we will discuss how to implement accordian panel in an ASP.NET web forms application using jQuery.

What is accordian
Accordian is great for displaying collapsible content panels for presenting information in a limited amount of space.

2 simple steps to produce an accordin using jQuery

Step 1 : The HTML of the accordion container needs pairs of headers and content panels as shown below
<div id="accordian" style="width: 400px">
<h3>Header 1</h3>
<div>Content Panel 1</div>
<h3>Header 2</h3>
<div>Content Panel 2</div>
<h3>Header 3</h3>
<div>Content Panel 3</div>
</div>

Step 2 : Invoke accordion() function on the container div
$('#accordian').accordion();

WebService (ASMX) Code

namespace Demo
{
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class CountryService : System.Web.Services.WebService
{

[WebMethod]
public List<Country> GetCountries()
{
List<Country> listCountries = new List<Country>();

string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("spGetCountries", con);
cmd.CommandType = CommandType.StoredProcedure;
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
Country country = new Country();
country.ID = Convert.ToInt32(rdr["ID"]);
country.Name = rdr["Name"].ToString();
country.CountryDescription = rdr["CountryDescription"].ToString();
listCountries.Add(country);
}
}

return listCountries;
}
}
}

WebForm jQuery code.

$(document).ready(function () {
$.ajax({
method: 'post',
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function (data) {
var htmlString = '';
$(data.d).each(function (index, country) {
htmlString += '<h3>' + country.Name + '</h3><div>'
+ country.CountryDescription + '</div>';
});
$('#accordion').html(htmlString).accordion({
collapsible: true,
active: 2,
});
}
});
});

collapsible - By default, atleast one section need to be active. If you want to collapse all the sections, including the one that is active, set this option to true.
active - This option can be set to a boolean value or integer. Setting active to false will collapse all panels. This requires the collapsible option to be true. An Integer value will make the corresponding panel active. Panels use zero-based index.

For the complete list of options, methods and events of accordian widget

[jeewanmaharjan]

First of all, thank you very much for this in depth tutorial about jquery.Can we expect testing and design pattern tutorial in next series.|

[swaminathbera]

wow, this was amazing! what if i want header names to be from one api call and other api call to fetch desc.

[akhtardaniyal]

Sir i need Help Regarding to this video..
in this video you are creating accordian with country names with their details but in my scenario i want to show single category and multiple items in each category like
i want to show like this
category a
item a
item b
item c
Category b
item a
item b
item c

and so on so far...

i have multiple items for category a also multiple items for category b and so on
and i want to show category heading at once and in detail multiple items related to heading ...

how we can achieve this...

[cesararmando]

Scumi if can used to call other page with parameters of panel accordion????

[AmitTiwari-enwm]

Thank you very much sir, excellent.
Sir can you please upload videos on design pattern and SDLC implementation in real

[moonedw]

Sir, I did exactly same as your tutorial. But I got the error "Uncaught TypeError: $(...).html(...).accordion is not a function".What should i do? I tried to use jQuery.noConflict() method. Also used 'jQuery instead of '$' .But still same error.