Question

It is supposed to work, but i am not able to figure out the problem. Take a look here

I have an accordion with these menus HealthCheck, Configuration and System
When I click on any one of them according to that particular element id detailTable div element gets appended (but before remove all elements from detailTable div) but in my case even the appending is not getting reflected, what seems to be the problem in my code? Please have a look somebody. Thanks

My code

<div id="ds-accordion">
<table cellspacing="0" width="100%" cellpadding="0" border="0">
    <tr>
        <td width="25%" valign="top" style="padding-right:5px" >
            <div id="mainAccordion" class="Accordion">
                <p class="AccordionPanelTab">&nbsp;<a id="healthCheckAccordion" onClick=""><img align="left" src="/csm/include/images/healthicon.gif">Health Check</a></p>
                <div class="AccordionPanelContent">
                    <a href="#">Link 1</a>
                </div>
                <p class="AccordionPanelTab"><a id="configurationAccordion" onClick=""><img align="left" src="/csm/include/images/conficon.gif">Configuration</a></p>
                <div class="AccordionPanelContent" >
                    <!-- 2nd Level -->
                    <div id="main2ndAccordion" class="Accordion" >
                        <p class="AccordionPanelTab">&nbsp;<a id="systemAccordion" onClick="" >System</a></p>
                        <div class="AccordionPanelContent">
                            <a href="#">Link 1</a>
                        </div>
                        <p class="AccordionPanelTab"><a id="productAccordion" onClick="" ></a></p>
                        <div class="AccordionPanelContent">
                            <a href="#" >Link 1</a>
                        </div>
                    </div>
                </div>
            </div>                            
        </td>

        <td width="75%" valign="top" style:"padding-left:10px;">
            <div id="detailTable">
            </div>
        </td>
    </tr>
</table>
</div>

My JS part

$('#ds-accordion a').click(function (event) {
    var elementId = $(this).attr("id");
    treeItemClickHandler(elementId);
});

var idMap = {
    "healthCheckAccordion": healthCheckDisplay,
    "configurationAccordion": configurationDisplay,
    "systemAccordion": systemDisplay
};

function healthCheckDisplay(id) {
    $('<div>').attr('id', 'healthCheckSpan').attr('style', 'display: none;').html('<div class="titleBlue">Health Check Summary</div>' + '<table style="border:#2F5882 1px solid;width:100%;"  cellspacing="1" cellpadding="1">' + '<thead>' + '<tr style="color :#FFFFFF;background-color: #8EA4BB">' + '<th width="10%" align="center"><b>Recommendations</b></th>' + '</tr>' + '</thead>' + '<tbody >' + '<tr style="color :#2F5882;background-color: #EDF1F5">' + '<td align="left" width="10%"><span id="recommendations"></span></td>' + '</tr>' + '</tbody>' + '</table>' + '</div>').appendTo('#detailTable');
    $("#detailTable").css("display", "inline");
    alert("healthCheckDisplay " + id);

}

function configurationDisplay(id) {
    alert("configurationDisplay " + id);
}

function systemDisplay(id) {
    alert("systemDisplay " + id);
}

function treeItemClickHandler(id) {
    (idMap[id])(id);
}

Edited
solution to 2nd part of the question, removing html element from div

$('#detailTable').empty();

Answer 1

I’m not 100% sure what you’re asking in your question, but the reason the HTML is not being displayed by the healthCheckDisplay function is that this builds a <div> with an id of healthCheckSpan, and a style of display: none.

Remove the call to attr that sets the style and you’ll see the appended elements. See http://jsfiddle.net/GNSpU/6/