jQuery tutorial for beginners - jQuery accordion in asp net

Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/06/jquery-accordion-in-aspnet.html 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. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 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(); Retrieve data from a database table and present it using jQuery accordian in an asp.net webforms application WebService (ASMX) Code namespace Demo { [WebService(Namespace = "http://tempuri.org/")] [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({ url: 'CountryService.asmx/GetCountries', 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 http://api.jqueryui.com/accordion