Create dynamic Accordion from database in ASP.Net using jQuery AJAX

Hi SajidHussa,

Check this example. Now please take its reference and correct your code.

HTML

<div class="myaccordian">
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" />
<style type="text/css">
    .ui-accordion .ui-accordion-header .ui-icon {
        position: absolute !important;
        left: 95% !important;
        top: 50% !important;
        margin-top: -8px !important;
    }
</style>
<script type="text/javascript">
    $(function () {
        makemenubygroup();
    });
    function makemenubygroup() {
        $.ajax({
            url: "Default.aspx/getsubgroupformenubar",
            data: {},
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            async: false,
            success: function (response) {
                var data = JSON.parse(response.d);
                if (data.length > 0) {
                    var html = "";
                    for (var i = 0; i < data.length; i++) {
                        var h3 = '<h3>' + data[i].Title + '</h3>';
                        var div = '<div>';
                        $.ajax({
                            url: "Default.aspx/getsubsubgroupformenubar",
                            data: '{ subsubmenu:' + data[i].Id + '}',
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            async: false,
                            success: function (response) {
                                var submenudata = JSON.parse(response.d);
                                for (var s = 0; s < submenudata.length; s++) {
                                    div += "<p>" + submenudata[s].Content + "</p>";
                                }
                            }
                        });
                        div += '</div>';
                        html += h3 + div;
                    }
                    $(".myaccordian").append(html).accordion();
                }
            }
        });
    }
</script>

Namespaces

C#

using System.Data;
using System.Web.Script.Services;
using System.Web.Services;
using Newtonsoft.Json;

VB.Net

Imports System.Data
Imports System.Web.Script.Services
Imports System.Web.Services
Imports Newtonsoft.Json

Code

C#

[WebMethod]
[ScriptMethod]
public static string getsubgroupformenubar()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("Id");
    dt.Columns.Add("Title");
    dt.Rows.Add("1", "Home");
    dt.Rows.Add("2", "Services");
    dt.Rows.Add("3", "About");
    dt.Rows.Add("4", "Contact");

    return JsonConvert.SerializeObject(dt);
}

[WebMethod]
[ScriptMethod]
public static string getsubsubgroupformenubar(string subsubmenu)
{
    DataTable dt = new DataTable();
    dt.Columns.Add("Id");
    dt.Columns.Add("Content");
    dt.Columns.Add("MenuId");

    dt.Rows.Add("1", "Home", "1");
    dt.Rows.Add("2", "Consulting", "2");
    dt.Rows.Add("3", "Outsourcing", "2");
    dt.Rows.Add("4", "About", "3");
    dt.Rows.Add("5", "Contact", "4");

    DataRow[] dr = dt.Select("MenuId='" + subsubmenu + "'");
    DataTable dt1 = new DataTable();
    if (dr.Length > 0)
    {
        dt1 = dr.CopyToDataTable();
    }

    return JsonConvert.SerializeObject(dt1);
}

VB.Net

<WebMethod>
<ScriptMethod>
Public Shared Function getsubgroupformenubar() As String
    Dim dt As DataTable = New DataTable()
    dt.Columns.Add("Id")
    dt.Columns.Add("Title")
    dt.Rows.Add("1", "Home")
    dt.Rows.Add("2", "Services")
    dt.Rows.Add("3", "About")
    dt.Rows.Add("4", "Contact")
    Return JsonConvert.SerializeObject(dt)
End Function

<WebMethod>
<ScriptMethod>
Public Shared Function getsubsubgroupformenubar(ByVal subsubmenu As String) As String
    Dim dt As DataTable = New DataTable()
    dt.Columns.Add("Id")
    dt.Columns.Add("Content")
    dt.Columns.Add("MenuId")
    dt.Rows.Add("1", "Home", "1")
    dt.Rows.Add("2", "Consulting", "2")
    dt.Rows.Add("3", "Outsourcing", "2")
    dt.Rows.Add("4", "About", "3")
    dt.Rows.Add("5", "Contact", "4")
    Dim dr As DataRow() = dt.Select("MenuId='" & subsubmenu & "'")
    Dim dt1 As DataTable = New DataTable()
    If dr.Length > 0 Then
        dt1 = dr.CopyToDataTable()
    End If

    Return JsonConvert.SerializeObject(dt1)
End Function

Screeenshot