jsTree check for any expanded node

If you haven’t read the introductory post on jsTree, I would recommend reading the Example of simple jsTree with static JSON data Example-of-simple-jsTree-with-static-JSON-data.

Also, for other jsTree related content, please see right hand side bar.

To check whether there is any node is in expanded mode or open, you can use below highlighted piece of code on a button click.

jsTree Check For Open Node

Code file is below, so that you copy it and can be tested.


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Simple jsTree</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {

            var jsondata = [
                           { "id": "ajson1", "parent": "#", "text": "Simple root node" },
                           { "id": "ajson2", "parent": "#", "text": "Root node 2" },
                           { "id": "ajson3", "parent": "ajson2", "text": "Child 1" },
                           { "id": "ajson4", "parent": "ajson2", "text": "Child 2" },
						   { "id": "ajson5", "parent": "#", "text": "Root node 3" },
                           { "id": "ajson6", "parent": "ajson5", "text": "Child 3" },
                           { "id": "ajson7", "parent": "ajson5", "text": "Child 4" }
            ];

            createJSTree(jsondata);
			
            $('#btnCheck').click(function () {
				$('#status').text("No - all nodes are collapsed");
                if($('#SimpleJSTree li.jstree-open').length)
				{
					$('#status').text("Yes - there is expanded node");
				}
            });

        });

        function createJSTree(jsondata) {            
            $('#SimpleJSTree').jstree({
                'core': {
                    'data': jsondata
                }
            });
        }
    </script>
</head>
<body>
    <div id="SimpleJSTree"></div>
    <button type="button" id="btnCheck">Check</button>
	<br /><span id="status"></span>
</body>
</html>

The outcome will be like below when all nodes are in collapsed mode when you click “Check” button.

jsTree all node collapsed

The outcome will be like below when at least one node is in expanded mode when you click “Check” button.

jsTree at least one node expanded

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.