title: multi-level directory menu using javascript object
body: <p>I'm trying to construct a multi-level directory menu using two variables listed below.</p>
  
  <p><code>obj</code> contains the details of multi-level menu and description key for each menu. </p>
  
  <p>I wanted to display this multi-level menu using the two variables and the solution should work for any level of menus.</p>
  
  <p>Right now, I have static design and how to iterate the object and put dynamic menu contents? When clicking menu content, appropriate description should appear.</p>
  
  <p>I need solution only with pure javascript (no jquery/angular)</p>
  
  <p>Any help would be highly appreciated!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var obj = {
      "firstitem": "name",
      "second item": {
          "description": "descriptioncontent",
          "briefdescription": {
              "age": "content1",
              "job": "content2",
              "objective": "content3"
          }
      }
  };
  
  var obj2 = {
      "name": "Christy",
      "descriptioncontent": "hi hello",
      "content1": "content 1 description",
      "content2": "content 2 description",
      "content3": "content 3 description"
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      margin-top: 2rem;
      font: 100% "Open sans", "Trebuchet MS", sans-serif;
    }
    
    a {
      text-decoration: none;
    }
    
    
  .wrapper {
      position: absolute;
      top: 10%;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      
    }
      
    .col-25 {
        float: left;
        width: 25%;
        margin-top: 6px;
    }
    
    .col-50 {
        float: left;
        width: 50%;
        margin-top: 6px;
    }
    
    .col-75 {
        float: left;
        width: 75%;
        margin-top: 6px;
    }
    
    .col-100{
        float: left;
        width: 100%;
        margin-top: 6px;
    }
    
  
    /**
     * Hidden fallback
     */
    [hidden] {
      display: none;
      visibility: hidden;
    }
    
    /**
     * Styling top level items
     */
    .nav a,
    .nav label {
      display: block;
      padding: .85rem;
      color: #fff;
      background-color: #151515;
      box-shadow: inset 0 -1px #1d1d1d;
      transition: all .25s ease-in;
    }
    .nav a:focus, .nav a:hover,
    .nav label:focus,
    .nav label:hover {
      color: rgba(255, 255, 255, 0.5);
      background: #030303;
    }
    
    .nav label {
      cursor: pointer;
    }
    
    /**
     * Styling first level lists items
     */
    .group-list a,
    .group-list label {
      padding-left: 2rem;
      background: #252525;
      box-shadow: inset 0 -1px #373737;
    }
    .group-list a:focus, .group-list a:hover,
    .group-list label:focus,
    .group-list label:hover {
      background: #131313;
    }
    
    /**
     * Styling second level list items
     */
    .sub-group-list a,
    .sub-group-list label {
      padding-left: 4rem;
      background: #353535;
      box-shadow: inset 0 -1px #474747;
    }
    .sub-group-list a:focus, .sub-group-list a:hover,
    .sub-group-list label:focus,
    .sub-group-list label:hover {
      background: #232323;
    }
    
    /**
     * Styling third level list items
     */
    .sub-sub-group-list a,
    .sub-sub-group-list label {
      padding-left: 6rem;
      background: #454545;
      box-shadow: inset 0 -1px #575757;
    }
    .sub-sub-group-list a:focus, .sub-sub-group-list a:hover,
    .sub-sub-group-list label:focus,
    .sub-sub-group-list label:hover {
      background: #333333;
    }
    
    /**
     * Hide nested lists
     */
    .group-list,
    .sub-group-list,
    .sub-sub-group-list {
      height: 100%;
      max-height: 0;
      overflow: hidden;
      transition: max-height .5s ease-in-out;
    }
    
    .nav__list input[type=checkbox]:checked + label + ul {
      /* reset the height when checkbox is checked */
      max-height: 1000px;
    }
    
    /**
     * Rotating chevron icon
     */
    label &gt; span {
      float: right;
      transition: -webkit-transform .65s ease;
      transition: transform .65s ease;
      transition: transform .65s ease, -webkit-transform .65s ease;
    }
    
    .nav__list input[type=checkbox]:checked + label &gt; span {
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-50"&gt;
                  &lt;nav class="nav" role="navigation"&gt;
                          &lt;ul class="nav__list"&gt;
                            &lt;li&gt;
                              &lt;input id="group-1" type="checkbox" hidden /&gt;
                              &lt;label for="group-1"&gt;&lt;span class="fa fa-angle-right"&gt;&lt;/span&gt; First level&lt;/label&gt;
                              &lt;ul class="group-list"&gt;
                                &lt;li&gt;&lt;a href="#"&gt;1st level item&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;
                                  &lt;input id="sub-group-1" type="checkbox" hidden /&gt;
                                  &lt;label for="sub-group-1"&gt;&lt;span class="fa fa-angle-right"&gt;&lt;/span&gt; Second level&lt;/label&gt;
                                  &lt;ul class="sub-group-list"&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;2nd level nav item&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;2nd level nav item&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;2nd level nav item&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;
                                      &lt;input id="sub-sub-group-1" type="checkbox" hidden /&gt;
                                      &lt;label for="sub-sub-group-1"&gt;&lt;span class="fa fa-angle-right"&gt;&lt;/span&gt; Third level&lt;/label&gt;
                                      &lt;ul class="sub-sub-group-list"&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;3rd level nav item&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;3rd level nav item&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;3rd level nav item&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                    &lt;/li&gt;
                                  &lt;/ul&gt;
                                &lt;/li&gt;
                              &lt;/ul&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                              &lt;input id="group-2" type="checkbox" hidden /&gt;
                              &lt;label for="group-2"&gt;&lt;span class="fa fa-angle-right"&gt;&lt;/span&gt; First level&lt;/label&gt;
                              &lt;ul class="group-list"&gt;
                                &lt;li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;1st level item&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;1st level item&lt;/a&gt;&lt;/li&gt;
                                  &lt;input id="sub-group-2" type="checkbox" hidden /&gt;
                                  &lt;label for="sub-group-2"&gt;&lt;span class="fa fa-angle-right"&gt;&lt;/span&gt; Second level&lt;/label&gt;
                                  &lt;ul class="sub-group-list"&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;2nd level nav item&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;2nd level nav item&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;
                                      &lt;input id="sub-sub-group-2" type="checkbox" hidden /&gt;
                                      &lt;label for="sub-sub-group-2"&gt;&lt;span class="fa fa-angle-right"&gt;&lt;/span&gt; Third level&lt;/label&gt;
                                      &lt;ul class="sub-sub-group-list"&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;3rd level nav item&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                    &lt;/li&gt;
                                  &lt;/ul&gt;
                                &lt;/li&gt;
                              &lt;/ul&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                              &lt;input id="group-3" type="checkbox" hidden /&gt;
                              &lt;label for="group-3"&gt;&lt;span class="fa fa-angle-right"&gt;&lt;/span&gt; First level&lt;/label&gt;
                              &lt;ul class="group-list"&gt;
                                &lt;li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;1st level item&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;1st level item&lt;/a&gt;&lt;/li&gt;
                                  &lt;input id="sub-group-3" type="checkbox" hidden /&gt;
                                  &lt;label for="sub-group-3"&gt;&lt;span class="fa fa-angle-right"&gt;&lt;/span&gt; Second level&lt;/label&gt;
                                  &lt;ul class="sub-group-list"&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;2nd level nav item&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;2nd level nav item&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;2nd level nav item&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;
                                      &lt;input id="sub-sub-group-3" type="checkbox" hidden /&gt;
                                      &lt;label for="sub-sub-group-3"&gt;&lt;span class="fa fa-angle-right"&gt;&lt;/span&gt; Third level&lt;/label&gt;
                                      &lt;ul class="sub-sub-group-list"&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;3rd level nav item&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;3rd level nav item&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="#"&gt;3rd level nav item&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                    &lt;/li&gt;
                                  &lt;/ul&gt;
                                &lt;/li&gt;
                              &lt;/ul&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                              &lt;input id="group-4" type="checkbox" hidden /&gt;
                              &lt;label for="group-4"&gt;&lt;span class="fa fa-angle-right"&gt;&lt;/span&gt; First level&lt;/label&gt;
                              &lt;ul class="group-list"&gt;
                                &lt;li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;1st level item&lt;/a&gt;&lt;/li&gt;
                                  &lt;input id="sub-group-4" type="checkbox" hidden /&gt;
                                  &lt;label for="sub-group-4"&gt;&lt;span class="fa fa-angle-right"&gt;&lt;/span&gt; Second level&lt;/label&gt;
                                  &lt;ul class="sub-group-list"&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;2nd level nav item&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;2nd level nav item&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                                &lt;/li&gt;
                              &lt;/ul&gt;
                            &lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/nav&gt;
          &lt;/div&gt;
          &lt;div class="col-50"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>