#title Navigation with jsTree: Open parent links and loading new page from leaf links
#author Stefan Hornburg (Racke)
#topics blog; jsTree
#date 2012-10-12
#pubdate 2012-10-12T10:40:27+02:00
#lang en



I was tasked with a hierarchical navigation for categories. Parent nodes are supposed to open the tree below and leaf nodes are supposed to take the user to a new page.

It took me a while to get acquainted with jsTree, but I managed to accomplish the following code:

{{{
<script type="text/javascript">

$(function () {

$("#navtree").jstree({

"ui" : {

"initially_select" : [ "nav_[cgi category_code]" ]

},

"themes" : { "icons" : false },

"core" : { "initially_open" : [ "nav_[cgi category_root]" ] },

"plugins" : [ "themes", "html_data", "ui" ]

});

$("#navtree").delegate("a","click", function(e) {

if ($("#navtree").jstree("is_leaf", this)) {

document.location.href = this;

}

else {

$("#navtree").jstree("toggle_node", this);

}

});

});

</script>
}}}

Please go to the [[http://shop.dataident.de/][DataIdent Shop]] in order to see how it works.