How to create tree view in html page that contains expand and collapse

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  li {
    padding-left: 0.5em;
  }

  .handle {                                                                            
    background: transparent url(/images/spacer.png);                         
    background-repeat: no-repeat;                                            
    background-position: center bottom;                                      
    display: block;                                                          
    float: left;                                                             
    width: 10px;                                                             
    height: 11px;                                                            
  }                                                                                    

  .collapsed {                                                                         
    background: transparent url(/images/plus-black.png);                     
    background-repeat: no-repeat;                                            
    background-position: center bottom;                                      
    cursor: pointer;                                                         
  }                                                                                    

  .expanded {                                                                          
    background: transparent url(/images/minus-black.png);                    
    background-repeat: no-repeat;                                            
    background-position: center bottom;                                      
    cursor: pointer;                                                         
  }     
</style>

<link rel="stylesheet" href="treeview.min.css" />
<script src="treeview.min.js"></script>

<script>

  $(document).ready(function() {
    jQuery("#tree ul").hide();

    jQuery("#tree li").each(function() {
      var handleSpan = jQuery("<span></span>");
      handleSpan.addClass("handle");
      handleSpan.prependTo(this);

      if(jQuery(this).has("ul").size() > 0) {
        handleSpan.addClass("collapsed");
        handleSpan.click(function() {
          var clicked = jQuery(this);
          clicked.toggleClass("collapsed expanded");
          clicked.siblings("ul").toggle();
        });
      }
    });
  })
</script>    

<div>
  <div id="page-header" >
    <h1>Terms and Conditions</h1>
    <div class="col-lg-7">
      <p class="bs-component">
        <a href="#" class="btn btn-primary">Expand All</a>
        <a href="#" class="btn btn-primary">Show hide regions</a>
      </p>
      <p class="bs-component">
        <a href="#" class="btn btn-primary">Collapse All</a>
        <a href="#" class="btn btn-primary">Show hide countries</a>
      </p>
    </div>
  </div>
  <div class="bs-component">
    <table class="table table-striped table-hover">
      <thead>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td><a href="#" class="btn btn-xs btn-primary">Edit</a></td>
          <td><a href="#" class="btn btn-xs btn-primary">Edit</a></td>
          <td><a href="#" class="btn btn-xs btn-primary">Edit</a></td>
          <td><a href="#" class="btn btn-xs btn-primary">Edit</a></td>
        </tr>
        <tr>
          <td>xxxx</td>
          <td>xxxx</td>
          <td>xxxx</td>
          <td>Comment</td>
          <td>Region</td>
          <td>Country A</td>
          <td>xxxx</td>
          <td>xxxx</td>
        </tr>
      </thead>
    </table>
  </div>
  <div id="Details" style="border:groove">
    <ul id="tree">
      <li>
        Section A
        <ul>
          <li> Line Item
            <ul>
              <li>
                <table class="table table-striped table-hover">
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                </table>

              </li>
            </ul>
          </li>

        </ul>
      </li>
    </ul>

  </div>
</div>

i need to create tree view in the html page that contains expand and collapse like in the attached image .

it supposed also to be two buttons in the page one that should collapse all tress and the other should expand them.

this code working for collapsing and expanding on the level of the row , but i need to know if there may be a ready jquery something that may draw that for me and be more simple and easy to use rather from building the thing from scratch

Answer 1

There are lot of jQuery plugins which enables a simple html tree grid structure with expand and collapse.

One good plugin is "TreeGrid Jquery plugin" which you can use for a very quick start. Follow the documentation in http://maxazan.github.io/jquery-treegrid/ and within no time, you can have what you want.

Answer 2

If you are using Bootstrap there are plugins and libraries for these kind of tasks, for example:

Bootstrap Tree View

If you want a pure HTML/JS solution refer to the following StackOverflow answer:

How to create a menu tree using HTML