Start Building Professional
Web Apps Today

Best way to dynamically render tabs with trees

My requirement it to dynamically render the navigation for an HTML page to either have 1) just a dhtmlxtree or 2) a dhtmlxtabbar with 2 tabs, each tab having a dhtmlxtree on it. A queryString parameter will determine how the page should be rendered. We do not have access to any server-side processing, so all processing needs to be coded in HTML and JavaScript. The HTML and JavaScript processing need to examine the QueryString parameter and then based on the value, dynamically render the page navigation (either a dhtmlxtree OR a dhtmlxtabbar with 2 tabs, each tab containing a dhtmlxtree).

I've written the JavaScript to determine how the page navigation needs to be rendered, however I would like a suggestion for the best way to define the HTML structure and the Javacript code for the tabbar, tabs and trees. The options the I see are:

1) Define all elements in HTML, then hide the ones that should not be used.

2) Define as much as possible in Javascript code.

Both options have pros and cons and I see challenges with each. Based on your experiences with using the components, I was hoping to get your thoughts on the easiest way to implement. And, if you have a suggested HTML layout, please pass it along.
Thanks

The most simple solution - prerender only the containers and put all other init in js logic

<div style='some sizes here' id="tabbar_here"></div>
<div style='some sizes here' id="tree1"></div>
<div style='some sizes here' id="tree2"></div>


<script>
    if (single || double){
       //init tree 1
    }
    if (double){
       //init tree2 
       //init tabbar
           tabbar.addTab("tab_1"....
           tabbar.setContent("tab_1","tree1");
           tabbar.addTab("tab_2"....
           tabbar.setContent("tab_2","tree2");
    }
</script>