title: How to fix spacing when creating collapsible menus and submenus
body: <p>I am using css and javascript to create a collapsible menu that is the width of the webpage and categorizes different types of expenditure. There are submenus that relate to specific types of expenditure. For example inside living costs, there is a submenu of household costs.</p>
  
  <p>The issue I am having is in increasing the height of a dropdown when a submenu is opened inside it. At the moment the when a submenu is opened, the content becomes hidden as the height of the dropdown it is inside does not increase in height.</p>
  
  <p>The javascript function which I am using does not increase the height of the original dropdown which the submenu lies in when the submenu is opened.</p>
  
  <p>So far I have tried using recursion to solve this issue but to no avail.</p>
  
  <p><a href="https://jsfiddle.net/buckler2/vu84wqLa/29/" rel="nofollow noreferrer">https://jsfiddle.net/buckler2/vu84wqLa/29/</a> - running version of code</p>
  
  <p>//css for dropdown</p>
  
  <pre><code>&lt;style&gt; 
  .collapsible {
   background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: auto;
  height: auto;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  }
  
  .active, .collapsible:hover {
  background-color: #555;
  }
  
  .content {
  height: 800px;
  padding:18px;
  
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>//Html example</p>
  
  <pre><code>&lt;html&gt;
   &lt;button class="collapsible"&gt;Expenditure&lt;/button&gt;
    &lt;div class="content"&gt;
    &lt;button class="collapsible"&gt;Living Expenses&lt;/button&gt;
          &lt;div class="content"&gt;
             &lt;button class="collapsible"&gt;Household expenses&lt;/button&gt;
               &lt;div class = "content"&gt;
                    //some list of household expenses
               &lt;/div&gt;
              //some list of other living expenses
           &lt;/div&gt;
  
         //some list of other types of expenditure
    &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>//Javascript for dropdown </p>
  
  <pre><code>&lt;script&gt; 
  var coll = document.getElementsByClassName("collapsible");
  var i;
  for (i = 0; i &lt; coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling; 
      if (content.style.maxHeight){
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      } 
    });
  }
  &lt;/script&gt;
  </code></pre>