Create a accordion in jquery, that picks up its content from a xml file

Question

I want to create a jquery accordion dynamically by getting node names from the xml.

In the xml under product domainmetadata will be only once and there are only 2 services at the moment CMS and DIS so 2 service types are available.

under service type (domainmetadata_service) domainmetadata_service_optiongroup and domainmetadata_optiongroup can be many and only 1 domainmetadata_resourceinfo

So how can i have an accordion something like below structure

Health Check
Configuration
    -System
        -environment
    -PRODUCT
        -DOMAINMETADATA
            -domainmetadata_gateways
            -domainmetadata_gridinfo
            -domainmetadata_service
                -CMS
                    -domainmetadata_service_optiongroup
                    -domainmetadata_optiongroup
                    -domainmetadata_resourceinfo
                -DIS
                    -domainmetadata_service_optiongroup
                    -domainmetadata_optiongroup
                    -domainmetadata_resourceinfo

Right now I am using Spry framework, which is giving me lots of trouble making the accordion dynamic. Click here to view the demo

My XML Response

<?xml-stylesheet type="text/xsl" href="csmclientinfa9.xsl"?><csmclient product="lolv9" date="11/4/11 4:36 PM" version="1.0"><system>
<environment>
    <variable name='HOST' value='estilo' />
</environment>
</system>
<product>
  <domainmetadata>
    <domainmetadata_gateways nodename='N_1164898448' host='opera' httpport='18,448' port='18,449' />
    <domainmetadata_gridinfo>Present</domainmetadata_gridinfo>

    <domainmetadata_service type='ContentManagementService' name='CMS' version='' licenseName='license_all'>
      <domainmetadata_serviceprocess node_name='N_1164898448' pre_start_command='null' post_start_command='null' jvm_options='' />
      <domainmetadata_service_optiongroup name='AddressManagerOptions'>
        <domainmetadata_option type='com.abc.isp.metadata.common.OptionType' name='FullPreLoadCountries' value='' />
        <domainmetadata_option type='com.abc.isp.metadata.common.OptionType' name='PartialPreLoadCountries' value='' />
      </domainmetadata_service_optiongroup>
      <domainmetadata_optiongroup name='DataServiceOptions'>
        <domainmetadata_option type='com.abc.isp.metadata.common.OptionType' name='DataServiceName' value='DIS' />
      </domainmetadata_optiongroup>
      <domainmetadata_resourceinfo>
        <domainmetadata_resource type='Connection' name='Database:PWX DB2400' isAvailable='true' />
        <domainmetadata_resource type='Connection' name='Application:SAP_ALE_IDoc_Reader' isAvailable='true' />
      </domainmetadata_resourceinfo>
    </domainmetadata_service>

    <domainmetadata_service type='DataIntegrationService' name='DIS' version='' licenseName='license_all'>
      <domainmetadata_serviceprocess node_name='N_1164898448' pre_start_command='null' post_start_command='null' jvm_options='' />
      <domainmetadata_service_optiongroup name='SQLServiceOptions'>
        <domainmetadata_option type='com.abc.isp.metadata.common.OptionType' name='MaxConcurrentConnections' value='100' />
        <domainmetadata_option type='com.abc.isp.metadata.common.OptionType' name='MaxPlanCacheSize' value='100' />
      </domainmetadata_service_optiongroup>
      <domainmetadata_service_optiongroup name='CoreServiceOptions'>
        <domainmetadata_option type='com.abc.isp.metadata.common.OptionType' name='ServicePort' value='0' />
        <domainmetadata_option type='com.abc.isp.metadata.common.OptionType' name='JMXPort' value='0' />
      </domainmetadata_service_optiongroup>
      <domainmetadata_service_optiongroup name='LoggingOptions'>
        <domainmetadata_option type='com.abc.isp.metadata.common.OptionType' name='LogDirectory' value='./disLogs' />
      </domainmetadata_service_optiongroup>
      <domainmetadata_resourceinfo>
        <domainmetadata_resource type='Connection' name='Database:PWX DB2400' isAvailable='true' />
        <domainmetadata_resource type='Connection' name='Application:SAP_ALE_IDoc_Reader' isAvailable='true' />
      </domainmetadata_resourceinfo>
    </domainmetadata_service>
</domainmetadata>
</product>

Answer 1

This is what I came up with

var infa9Spans='<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9PMServer">PowerCenter Server</a><br/></span>';
$(xml).find("csmclient").each(function()
        {
            $(this).find('product').each(function(){ 

                  $(this).find('domainmetadata_service').each(function(){ 
                    var servicename=$(this).attr('name');
                    infa9Spans+='<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9Service">'+servicename+'</a><br/></span>';
                    //var servicediv="<div title="+servicename+" class='class'>";
                });
            });
        });
infa9Spans+='<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9PWXServer">PowerExchange Server</a><br/></span>'+
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9Oracle">Oracle</a><br/></span>'+
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9DB2">DB2</a><br/></span>'+
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9Sybase">Sybase</a><br/></span>'+
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9Informix">Informix</a><br/></span>'+
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9ODBC">ODBC</a><br/></span>'+
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9Java">Java Version</a><br/></span>'+
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9TomcatEnvvars">Tomcat Envvars.txt</a><br/></span>'+
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9AD50">AD50.cfg</a><br/></span>';


var productSpans=infa9Spans;

$('#productAcc').append(productSpans);

customizeProductAccordion("infa9");

Answer 2

Have you tried using a spry dataset for your XML and then using Spry HTML Regions to place the data?

The region basically just gives the markup access to the data in so many words. Then repeat out the data as needed. You can always add custom fields to it as well.

Something like:

<div class="Accordion" id="mainAccordion" tabindex="0">                
<div class="AccordionPanel">
    <div class="AccordionPanelTab">&nbsp;<a id="healthCheckAccordion" onClick=""><img align="left" src="http://cdn5.iconfinder.com/data/icons/fatcow/16x16/health.png">Health Check</a></div>

</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">&nbsp;<a id="configurationAccordion" onClick="sysAcc.openFirstPanel()"><img align="left" src="http://cdn4.iconfinder.com/data/icons/Xiao/78.png">Configuration</a></div>
    <div class="AccordionPanelContent">

        <div class="Accordion" id="main2ndAccordion" tabindex="1">
            <div class="AccordionPanel" spry:region="myDataset">
                <div class="AccordionPanelTab">&nbsp;&nbsp;&nbsp;&nbsp;<a id="systemAccordion" style="color:#ffffff;background-color: #2F5882;"><img src="http://cdn2.iconfinder.com/data/icons/gnomeicontheme/16x16/devices/gnome-dev-computer.png"/>&nbsp;&nbsp;System</a></div>
                <div class="AccordionPanelContent" spry:repeatchildren="myDataset">
                    <a id="kernelParamsAccordion">{myField}</a><br/>


                </div>
            </div>

            <div class="AccordionPanel"  spry:region="myDataset">
                <div class="AccordionPanelTab">&nbsp;&nbsp;&nbsp;&nbsp;<img src="http://cdn1.iconfinder.com/data/icons/dortmund/dortmund-16x16/product-design.png"/><a id="productName" style="color:#ffffff;background-color: #2F5882;">&nbsp;&nbsp;ABC</a></div>
                <div class="AccordionPanelContent" id="level2Acc">

                </div>
            </div>

        </div>
    </div>    
</div>

Not sure this is what you're looking for but hope it helps.