title: After loading web page, In tree view how to show expand and collapse of child/ node
body: <p>I am using MVC application.
  After loading web page, In tree view how to show expand and collapse of child/ node. If first child is expanded then if we click on second child first child should be collapsed and so on. </p>
  
  <p>Please find below tree view structure.  when I run the web page is displaying with below tree structure.  </p>
  
  <pre><code>                           Company Maintenance
  
                             -Employees
  
                                    -Employee Details
  
                                           Name
  
                                           Permanent Address
  
                                           Present Address
  
                                           Technologies 
  
                                       -Reports
  
                                           Report1
  
                                           Report2
  
                                           Report3
  
                                      -Employee Maint.
  
                                            CSE
  
                                             IT
  
                                             ECE
  
                                             CSE
  
                               Human Resources
  </code></pre>
  
  <p>I am using jquery and html to display above tree view.</p>
  
  <p>and the  Index.CSHTML code is as follows. </p>
  
  <p>Here all the details are in hard-coded only. No backend data. Every thing return in Index.cshtml only.</p>
  
  <pre><code> &lt;body&gt;
      &lt;table&gt;
      &lt;tr&gt;
      &lt;td style="width: 30%"&gt;
      &lt;ul id="tree1"&gt;
      &lt;li&gt;
      &lt;a href="#"&gt;TECH&lt;/a&gt;
  
      &lt;ul&gt;
      &lt;li class="active"&gt;&lt;a data-toggle="pill" href="#compmain"&gt;Company Maintenance&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;Employees
      &lt;ul&gt;
      &lt;li&gt;Employee Details
  
      &lt;ul&gt;
      &lt;li&gt;&lt;a data-toggle="pill" href="#name"&gt;Name &lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="pill" href="#peraddr"&gt;Perminent Address&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="pill" href="#presaddr"&gt;Present Address &lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="pill" href="#tech"&gt;Technologies&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;Reports
      &lt;ul&gt;
      &lt;li&gt;&lt;a data-toggle="pill" href="#report1"&gt;Report1 &lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="pill" href="#report1"&gt;Report2 &lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="pill" href="#report1"&gt;Report3 &lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;Department
  
      &lt;ul&gt;
      &lt;li&gt;&lt;a data-toggle="pill" href="#cse"&gt;CSE &lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="pill" href="#it"&gt;IT &lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="pill" href="#eee"&gt;EEE&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="pill" href="#ece"&gt;ECE&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="pill" href="#hrinfor"&gt;Human Resources&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;/ul&gt;
      &lt;/td&gt;
      &lt;td&gt;
      &lt;div class="tab-content"&gt;
  
      &lt;div id="compmain" class="tab-pane fade in active"&gt;
      &lt;h3&gt;Details&lt;/h3&gt;
      &lt;p&gt;Company Maintainence infor&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="name" class="tab-pane fade"&gt;
      &lt;h3&gt;Details&lt;/h3&gt;
      &lt;p&gt;Name of the Employee&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="peraddr" class="tab-pane fade"&gt;
      &lt;h3&gt;Details&lt;/h3&gt;
      &lt;p&gt;Perminent Address&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="presaddr" class="tab-pane fade"&gt;
      &lt;h3&gt;Details&lt;/h3&gt;
      &lt;p&gt;Present Address&lt;/p&gt;
      &lt;/div&gt;
  
  
      &lt;div id="report1" class="tab-pane fade"&gt;
      &lt;h3&gt;Details&lt;/h3&gt;
      &lt;p&gt;Report 1&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="report2" class="tab-pane fade"&gt;
      &lt;h3&gt;Details&lt;/h3&gt;
      &lt;p&gt;Report 2&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="report3" class="tab-pane fade"&gt;
      &lt;h3&gt;Details&lt;/h3&gt;
      &lt;p&gt;Report 3&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="cse" class="tab-pane fade"&gt;
      &lt;h3&gt;Details&lt;/h3&gt;
      &lt;p&gt;CSE&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="it" class="tab-pane fade"&gt;
      &lt;h3&gt;Details&lt;/h3&gt;
      &lt;p&gt;IT&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="ece" class="tab-pane fade"&gt;
      &lt;h3&gt;Details&lt;/h3&gt;
      &lt;p&gt;ECE&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="eee" class="tab-pane fade"&gt;
      &lt;h3&gt;Details&lt;/h3&gt;
      &lt;p&gt;EEE&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="hrinfor" class="tab-pane fade"&gt;
      &lt;h3&gt;Details&lt;/h3&gt;
      &lt;p&gt;List of HR Resources&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  
  
      &lt;/body&gt;
  </code></pre>
  
  <p>This is Controller action method</p>
  
  <pre><code>public class HomeController : Controller
  {
  public ActionResult Index()
  {
  
  return View();
  }
  
  }
  </code></pre>
  
  <p>Please find below code. This is the code I am using to display tree view.</p>
  
  <pre><code>&lt;head&gt;
   &lt;link rel="stylesheet"
     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
     &lt;script
     src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
     &lt;script
     src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
     &lt;/head&gt;
  
     &lt;script type="text/javascript"&gt;
  
       $.fn.extend({
          treed: function (o) {
  
              var openedClass = 'glyphicon-minus-sign';
              var closedClass = 'glyphicon-plus-sign';
  
              if (typeof o != 'undefined') {
                  if (typeof o.openedClass != 'undefined') {
                      openedClass = o.openedClass;
                  }
                  if (typeof o.closedClass != 'undefined') {
                      closedClass = o.closedClass;
                  }
              };
  
              //initialize each of the top levels
              var tree = $(this);
              tree.addClass("tree");
              tree.find('li').has("ul").each(function () {
                  var branch = $(this); //li with children ul
                  branch.prepend("&lt;i class='indicator glyphicon " + closedClass + "'&gt;&lt;/i&gt;");
                  branch.addClass('branch');
                  branch.on('click', function (e) {
                      if (this == e.target) {
                          var icon = $(this).children('i:first');
                          icon.toggleClass(openedClass + " " + closedClass);
                          $(this).children().children().toggle();
                      }
                  })
                  branch.children().children().toggle();
              });
  
  
  
              //fire event from the dynamically added icon
              tree.find('.branch .indicator').each(function () {
                  $(this).on('click', function () {
                      $(this).closest('li').click();
                  });
              });
              //fire event to open branch if the li contains an anchor instead of text
              tree.find('.branch&gt;a').each(function () {
                  $(this).on('click', function (e) {
                      $(this).closest('li').click();
                      e.preventDefault();
                  });
              });
              //fire event to open branch if the li contains a button instead of text
              tree.find('.branch&gt;button').each(function () {
                  $(this).on('click', function (e) {
                      $(this).closest('li').click();
                      e.preventDefault();
                  });
              });
          }
      });
  
  //Initialization of treeviews
  
  $('#tree1').treed({openedClass : 'glyphicon-folder-open', closedClass : 'glyphicon-folder-close'});
  
      $('#tree1 .branch').each(function () {
  
          var icon = $(this).children('i:first');
          icon.toggleClass('glyphicon-folder-open glyphicon-folder-close');
          $(this).children().children().toggle();
          $('#tree1').nestable('collapseAll');    
      });
  
  
  &lt;/script&gt;
  </code></pre>