Html5 Tree

Invoke the expandItem method of the jqxTree. Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxTree'>
    <ul>
        <li item-selected='true'>Home</li>
        <li id="solutions">Solutions
            <ul>
                <li>Education</li>
                <li>Financial services</li>
                <li id="government">Government</li>
                <li>Manufacturing</li>
                <li>Solutions
                    <ul>
                        <li>Consumer photo and video</li>
                        <li>Mobile</li>
                    </ul>
                </li>
                <li>All industries and solutions</li>
            </ul>
        </li>
    </ul>
</div>
<input type="button" style="margin: 10px;" id="jqxbutton" value="Collapse 'Solutions'" />
<input type="button" style="margin: 10px;" id="jqxbutton2" value="Expand 'Solutions'" />

JavaScript

$('#jqxTree').jqxTree({
       height: '300px',
       width: '300px',
       theme: 'energyblue'

   });
   $("#jqxbutton").jqxButton({
       theme: 'energyblue',
       width: 200,
       height: 30
   });
   $("#jqxbutton2").jqxButton({
       theme: 'energyblue',
       width: 200,
       height: 30
   });
   $('#jqxbutton').click(function () {
       $("#jqxTree").jqxTree('collapseItem', $("#solutions")[0]);
   });
   $('#jqxbutton2').click(function () {
       $("#jqxTree").jqxTree('expandItem', $("#solutions")[0]);
   });