If you need to print exactly like given in the link
edit your js code to out put html like this
<ul> <li class="category">Menu 1 <ul> <li>Menu 1 sub 1</li> <li>Menu 2 sub 2</li> </ul> </li> <li>Menu 2</li> </ul>
Us the provided JS code
$('li.category').addClass('plusimageapply'); $('li.category').children().addClass('selectedimage'); $('li.category').children().hide(); $('li.category').each( function(column) { $(this).click(function(event){ if (this == event.target) { if($(this).is('.plusimageapply')) { $(this).children().show(); $(this).removeClass('plusimageapply'); $(this).addClass('minusimageapply'); } else { $(this).children().hide(); $(this).removeClass('minusimageapply'); $(this).addClass('plusimageapply'); } } }); } );
UPDATE1 : Try this JS code it will print the result as I wrote in the point number one *NOTE : the code is not optimized *
$(document).ready(function(){
var xml = "<root> \
<method name='A'> \
<childcall name='B'></childcall> \
<childcall name='C'></childcall> \
</method> \
<method name='B'> \
<childcall name='D'></childcall> \
</method> \
<method name='C'> \
<childcall name='D'></childcall> \
<childcall name='E'></childcall> \
</method> \
</root>";
var data = $.parseXML(xml);
console.log(data);
var htmltxt="test<ul>";
$(data).find('method').each(function(){
var namenode = $(this).attr('name');
var count = 0;
$(this).children('childcall').each(function(){ count++; });
if(count>0){
htmltxt = htmltxt + "<li='category'>" + namenode +"<ul>";
$(this).children('childcall').each(function(){
var name = $(this).attr('name');
htmltxt = htmltxt + "<li>" + name + "</li>";
});
htmltxt = htmltxt + "</ul></li>";
}else{
htmltxt = htmltxt +"<li>"+namenode+"</li>";
}
});
htmltxt = htmltxt + "</ul>";
$("#page-wrap").html(htmltxt);
});
UPDATE 2 JSFiddle