title: Treeview with dropdown sublist in CSS
body: <p>I'm styling an HTML treeview with CSS and I'm trying to make sublists apear sliding down when expanding a node.</p>
  
  <p>Here is my <em>simplified</em> <strong>index.html</strong> :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="node"&gt;
        Div-1
        &lt;div class="children"&gt;
          &lt;div class="node"&gt;
            Div-1-1
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="node"&gt;
        Div-2
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the <strong>script.js</strong> :</p>
  
  <pre><code>$(document).ready(function() {
    $('.node').click(function(event) {
      $(event.target).toggleClass('expanded');
    });
  });
  </code></pre>
  
  <p>And the <strong>style.css</strong> :</p>
  
  <pre><code>.node {
    border: solid 1px red;
  }
  .node &gt; .children {
    border: solid 1px lightblue;
    overflow: hidden;
    padding-left: 10px;
    max-height: 0;
    transition: max-height .5s ease-in;
  }
  .node.expanded &gt; .children {
    display: block;
    max-height: 50px;
  }
  </code></pre>
  
  <p>The result (see. <a href="http://plnkr.co/edit/Kc5we48hXR5NB93Uf5K3?p=preview" rel="nofollow">plunkr1</a>) is fine BUT the sublist is not sliding down, it's the rest of the tree that is sliding down revealing the sublist.</p>
  
  <p>So I tried something else, I wrapped the "children" div :</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="node"&gt;
      Div-1
      &lt;div class="childrenWrapper"&gt;
        &lt;div class="children"&gt;
          &lt;div class="node"&gt;
            Div-1-1
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="node"&gt;
      Div-2
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And changed the CSS :</p>
  
  <pre><code>.node {
    border: solid 1px red;
  }
  .node &gt; .childrenWrapper {
    border: solid 1px lightblue;
    overflow: hidden;
    padding-left: 10px;
  }
  .node &gt; .childrenWrapper &gt; .children {
    transform: translateY(-100%);
    transition: transform .5s ease;
  }
  .node.expanded &gt; .childrenWrapper &gt; .children {
    transform: translateY(0);
  }
  </code></pre>
  
  <p>Now (see. <a href="http://plnkr.co/edit/MH8YaBSb9FwyJQ0UWPgW?p=preview" rel="nofollow">plunkr2</a>) the sublist is properly sliding, BUT the wrapping div with the needed overfow hidden keeps the size of the sublist wich is pretty ugly.</p>
  
  <p>I can't find a solution to this issue. Any idea ?</p>