Explorer Bar (Accordion) igTree

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<style>
    /* moved after Ignite UI styles to allow for normal overriding */
    .ui-igtree-parentnode {
        /* remove left padding on nodes */
        padding-left:0;
    }
       .ui-igtree-parentnode a {
            /* add back padding to the right */
            padding-right: 1.9em;
            padding-left: 20px!important;
        }
        .ui-igtree-parentnode a.ui-state-hover, .ui-igtree-parentnode a.ui-state-active {
            padding-left: 20px!important;
        }
    /* .ui-igtree-expander {
        move expander to the right
        left: auto;
        right: .8em;
        margin-top: 0;
    }  */
 /* parent nodes border only */
.ui-igtree-parentnode > a, .ui-igtree-parentnode > a.ui-state-active {
  border: 1px solid black;
}

.ui-igtree-node.ui-igtree-node-nochildren a > img, .ui-igtree-parentnode a > img{
    display: none;
    
}
.ui-igtree-node.ui-igtree-node-nochildren a.ui-state-hover > img, .ui-igtree-parentnode a.ui-state-hover > img{
    display: block;
    
}
</style>
<ul id="tree"></ul>

CSS

#tree {
    /* optional border around the control */
    /* border: 1px solid #ccc;
    padding-bottom: 0; */ 
    background-color:#ececec;
}
.ui-igtree img {
    position: absolute;
    right: 20px;
    top: 10px;
}
.ui-igtree a {
    /* stretch nodes to full width */
    display: block;
}
 
 /* parent nodes border only */
.ui-igtree-parentnode > a, .ui-igtree-parentnode > a.ui-state-active {
  border: 1px solid black;
}

JavaScript

$(function () {

            var data = [
                {
                    "ID": 1, "RegionName": "North America", "Countries":
                    [
                        { "ID": 1, "CountryName": "United States" },
                        { "ID": 2, "CountryName": "Canada" },
                        { "ID": 3, "CountryName": "Mexico" }
                    ]
                },
                {
                    "ID": 2, "RegionName": "South America", "Countries":
                    [
                        { "ID": 4, "CountryName": "Brazil" },
                        { "ID": 5, "CountryName": "Uruguay" }
                    ]
                },
                {
                    "ID": 3, "RegionName": "Europe", "Countries":
                    [
                        { "ID": 6, "CountryName": "United Kingdom" },
                        { "ID": 7, "CountryName": "Germany" },
                        { "ID": 8, "CountryName": "Bulgaria" }
                    ]
                }
            ];

            $("#tree").igTree({
                dataSource: data, //JSON Array defined above
                singleBranchExpand : true,
                width: 300,
                bindings: {
                    textKey: "RegionName",
                    valueKey: "ID",
                    imageUrlKey: "ImageUrl",
                    nodeContentTemplate: '<img src="http://www.igniteui.com/images/samples/tree/documents-folder.png"> ${RegionName}',
                    childDataProperty: "Countries",
                    bindings: {
                        textKey: "CountryName",
                        valueKey: "ID",
                        nodeContentTemplate: '<img class="img1" src="http://igniteui.com/images/samples/tree/music.png"><img class="img2" src="http://www.igniteui.com/images/samples/tree/documents-folder.png"> ${CountryName}'
                        }
                },
                 nodeClick: function(evt, ui) {
                     ...