title: toggle entire tree only by a simple button in jstree
body: <p>I know that is ways to open and close entire tree with two different element in <a href="https://www.jstree.com" rel="nofollow"><strong>jstree</strong></a> jquery plugin like this :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
  
  $treeview = $('#jstree-container');
  
      $treeview.jstree({
          "core": {
              'data': [
    {
      "id": 1,
      "text": "Root node",
      "children": [
        {
          "id": 2,
          "text": "Child node 1",
          "children": [
            {
              "id": 4,
              "text": "Child node 4"
            },
            {
              "id": 5,
              "text": "Child node 5"
            }
          ]
        },
        {
          "id": 3,
          "text": "Child node 2",
          "children": [
            {
              "id": 7,
              "text": "Child node 7"
            },
            {
              "id": 8,
              "text": "Child node 8"
            }
          ]
        }
      ]
    }
  ],
              "check_callback": true,
              "animation": 200,
              "dblclick_toggle": false,
              "themes": {
                  responsive: true,
                  "dots": true,
                  "icons": true
              }
          },
          "plugins": ["checkbox", "dnd", "contextmenu", "search"],
          "search": {
              "show_only_matches": true,
              "show_only_matches_children": true
          },
          "checkbox": {
              "whole_node": false,
              "tie_selection": false //برا یاینکه با کلیک روی تکست گره ، چک باکس تیک نخوره
          }
      });
  
  
  
  $('#collapse-all').click(function () {
    $treeview.jstree('close_all');
  });
  $('#expand-all').click(function () {
    $treeview.jstree('open_all');
  });
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/&gt;
  
  &lt;a href="#" id="expand-all"&gt;open all&lt;/a&gt;
  |
  &lt;a href="#" id="collapse-all"&gt;close all&lt;/a&gt;
  
  &lt;div id="jstree-container"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But how can I open and close entire tree with a button so that with click on it if tree is open be closed and if it closed , open it ?</p>