Question

I have a calender control and on selecting a respective date, I need to display Today’s Due and Over due as two section in an accordion. I tried adding div with style to give the look of accordion but that is giving UI issues.Currently,I am planning to add Accordion (Jquery).Since, the accordion is to be displayed while selecting a date from calender control. I am binding the accordion div in code behind and converting it to Json to be shown, while selecting the respective date.The code to add the div is as follows:

[WebMethod(EnableSession = true)]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string CalenderBinderAccordian()
    {
        try
        {
            //Code to fetch ProductGroup is not shown
        foreach (var p in productGroup)
        {
            string todoString = "";
            int uniqueID = Guid.NewGuid().GetHashCode();
            todoString = "<div id='accordion' class='ui-accordion ui-widget ui-helper-reset' role='tablist'><h3><a href=#" + uniqueID + "><b>Due Today</b></a></h3>";
            todoString += "<div>";
            foreach (var t in p.todo)
            {
                var tempAmt = String.Empty;
                if ((t.Amount == null) || t.Amount == String.Empty)
                    tempAmt = "0";
                else
                    tempAmt = Convert.ToDecimal(t.Amount.ToString()).ToString();
                todoString += "<p style='padding:5px 0px; border-bottom:dashed 1px #dddddd;'><b>" + todoCount.ToString() + "</b>. " + t.ProductName + "<span style='text-align:right; padding-right:5px;'> $" + tempAmt + "</span><a href='PaymentDetails.aspx' target='_blank' style='text-decoration:none;'><b>Pay Now</b></a></p>";
                todoCount++;
            }
            todoString += "</div>";
            var overDue = temps.Select(x => new { x.DueDate }).Distinct().ToList();
            int overDueCount = 0;
            uniqueID = Guid.NewGuid().GetHashCode();
            todoString += "<h3><a href=#" + uniqueID + "><b>Over Due</b></a></h3>";
            int todoCount1 = 1;
            todoString += "<div>";
            for (int i = 0; i < overDue.Count(); i++)
            {
                if ((Convert.ToDateTime(overDue[i].DueDate) - Convert.ToDateTime(p.dates)).Days < 0)
                {
                    overDueCount++;
                    var overDueList = temps.FindAll(x => x.DueDate.Equals(overDue[i].DueDate)).ToList();
                    foreach (var t in overDueList)
                    {
                        var tempAmt = String.Empty;
                        if ((t.Amount == null) || t.Amount == String.Empty)
                            tempAmt = "0";
                        else
                            tempAmt = Convert.ToDecimal(t.Amount.ToString()).ToString();
                        todoString += "<p  style='padding:5px 0px; border-bottom:dashed 1px #dddddd;'><b>" + todoCount1.ToString() + "</b>. " + t.ProductName + "<span style='text-align:right; padding-right:5px;'> $" + tempAmt + "</span><a href='PaymentDetails.aspx' target='_blank' style='text-decoration:none;'><b>Pay Now</b></a></p>";
                        todoCount++;
                        todoCount1++;
                    }
                }
            }
            todoString += "</div>";
            todoString = todoString + "</div>\",\"count\":\"" + todoCount + "\"},";
            jsonString = jsonString + String.Format("{{\"{0}\" : \"{1}\",\"{2}\" : \"{3}", "dates", p.dates, "todo", todoString);
            if (overDueCount.Equals(0))
            {
                jsonString = jsonString.Replace("<h3><a href=#" + uniqueID + "><b>Over Due</b></a></h3><div></div>", "");
            }
        }
        jsonString = jsonString.TrimEnd(',');
        jsonString = '[' + jsonString + ']';
        string data= jsonString;
        return data;
    }
    catch (Exception ex)
    {
        throw;
    }
}    

The code in the ascx page is as follows:
/

/Scripts for Calender control
           <script type="text/javascript" src="../../Scripts/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="../../Content/jquery.calendarPicker.css" type="text/css" media="screen"/>
   <script type="text/javascript" src="../../Scripts/jquery.calendarPicker.js"></script>
    <link rel="stylesheet" href="../../Content/style.css" type="text/css" media="screen"/>
//Scripts for accordion
  <link rel="stylesheet" href="../../Content/jquery-ui.css" />
  <script  type="text/javascript" src="../../Scripts/jquery-ui.js"></script>
  <script  type="text/javascript">
        $(function () {
            $("#accordion").accordion();
        });
    </script>
     <div class="calendercontent">
        <div id="dsel1" style="width:200px;">
            <a href="" onclick="calendarPicker1.changeDate(new Date())"></a>
            <span id="span1"></span>        
        </div>
        <img class="ref" src="../../Images/refresh_circle.gif" alt="refresh" title="refresh"/>
        <div id="todo"></div>
    </div> 

It is noticed that when I add the div data in the ascx page the accordion works fine and using fireBug the accordion class are shown.But since the accordion data is added in the code behind and displayed using java script.The below displayed function is not working.
Kindly help, I am a beginner in Jquery.

<script  type="text/javascript">
            $(function () {
                $("#accordion").accordion();
            });
        </script>

Answer 1

Try with this:

$(document).find("#accordion").accordion();