converting xml tree to an html expandable tree using jquery

converting xml tree to an html expandable tree using jquery

so thats what im trying to do. its working fine.
this is my code:
what i want to do i have an image assigned to each type of child, or node.
for example i created the class CD so that i can insert in the place of the + the image on the link i put here.
as you can see, its working here:
but not when i use it on the web server with the official html and xml files.
this is the xml file im using as example: http://www.w3schools.com/xml/cd_catalog.xml
any help is appreciated. thanks!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src=" http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url:"cd_catalog.xml",
success: function(tree){
traverse($('#treeView li'),tree.firstChild)
// this – is an &mdash;
$('#treeView li:has(li)').addClass("Max").click(function (e) {
       $(this).toggleClass("Max Min");
       $(this).children().toggle();
        e.stopPropagation();
    })
    $('#treeView li').click(function (g) {
      
        var mytree2 = $(this);
        mytree2.children('li').toggle();
       
        g.stopPropagation();
})
    $('#treeView li:has(CD)').addClass("CD").click(function (e) {
       $(this).toggleClass("CD");
       $(this).children().toggle();
        e.stopPropagation();
})
$('<b></b>').prependTo('#treeView li:has(li)').click(function(){
var sign=$(this).text()
if (sign=="–")
$(this).text('+').next().children().hide()
else
$(this).text('–').next().children().show()
})
}
})
});
function traverse(node,tree) {
var children=$(tree).children()
node.append(tree.nodeName)
if (children.length){
var ul=$("<ul>").appendTo(node)
children.each(function(){
var li=$('<li>').appendTo(ul)
traverse(li,this)
})
}else{
$('<ul><li>'+ $(tree).text()+'<\/li><\/ul>').appendTo(node)
}
}
</script>
<style type="text/css">
#treeView li{list-style: none;}
#treeView ul { padding-left: 1em; }
#treeView b { padding-right: 1em; }
.Min{
    background: URL(" http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
    padding-left : 20px;
}
.Max{
    background: URL(" http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat ;
    padding-left : 20px;
}
li{
background: URL(" http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif") no-repeat ;
        padding-left : 20px;
}
CD{
   
background :  URL(" http://i1341.photobucket.com/albums/o747/Mike_Younes/water_zps4x5hrrgg.png") no-repeat ;
    background-size: 12px 12px;
        padding-left : 20px; 
    cursor:pointer;
    }
</style>
<title>treeView</title>
</head>
<body>
<ul id="treeView">
<li></li>
</ul>
</body>
</html>