title: Expand/collapse a menu list animated and only with CSS
body: <p>Here's what I'm trying to make:</p>
  
  <p><img src="https://i.stack.imgur.com/Z9nk3.png" alt="Visual aid"></p>
  
  <ol>
  <li>Click on "PORTFOLIO";</li>
  <li>Pushes everything down smoothly;</li>
  <li>New links fade-in smoothly;</li>
  <li>Click on "PORTFOLIO" again, do everything in reverse;</li>
  </ol>
  
  <p>My current code;</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
      $('[data-toggle]').on('click', function () {
          var id = $(this).data("toggle"),
              $object = $(id),
              className = "open";
  
          if ($object) {
              if ($object.hasClass(className)) {
                  $object.removeClass(className)
              } else {
                  $object.addClass(className)
              }
          }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#list {
      display: none;
  }
  #list.open {
      display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;A Empresa&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="hide" data-toggle="#list"&gt;Portfolio&lt;/a&gt;
              &lt;ul id="list"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Comerciais&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Residenciais&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Institucionais&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Edifícios&lt;/a&gt; &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contato&lt;/a&gt; &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It's possible to accomplish this without JS, only with CSS? I have no clue whatsoever how to do the animation part, I tried CSS Transitions propriety, but didn't work.</p>
  
  <p>Also, any tips for the markup and JS? I don't thinks I'm doing it the "right way"... any tips would be appreciated.</p>