Expand/collapse a menu list animated and only with CSS

Question

Here's what I'm trying to make:

1. Click on "PORTFOLIO";
2. Pushes everything down smoothly;
3. New links fade-in smoothly;
4. Click on "PORTFOLIO" again, do everything in reverse;

My current 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)
            }
        }
    });
});

#list {
    display: none;
}
#list.open {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
    <ul>
        <li><a href="#">Home</a> </li>
        <li><a href="#">A Empresa</a> </li>
        <li><a href="#" class="hide" data-toggle="#list">Portfolio</a>
            <ul id="list">
                <li><a href="#">Comerciais</a> </li>
                <li><a href="#">Residenciais</a> </li>
                <li><a href="#">Institucionais</a> </li>
                <li><a href="#">Edifícios</a> </li>
            </ul>
        </li>
        <li><a href="#">Contato</a> </li>
    </ul>
</nav>

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.

Also, any tips for the markup and JS? I don't thinks I'm doing it the "right way"... any tips would be appreciated.

Answer 1

With only CSS you may use :focus and eventually pointer-events if you want a toggle effect :

#list {
  max-height: 0;
  overflow: hidden;
  transition: 0.5s linear;
}

a:focus+#list {
  max-height: 15em;
}
/* only select that link , here using the href attribute */
a[href="nowhere"]:focus {
  pointer-events: none;
}

<nav>
  <ul>
    <li><a href="#">Home</a> </li>
    <li><a href="#">A Empresa</a> </li>
    <li><a href="#nowhere">Portfolio</a>
      <ul id="list">
        <li><a href="#">Comerciais</a> </li>
        <li><a href="#">Residenciais</a> </li>
        <li><a href="#">Institucionais</a> </li>
        <li><a href="#">Edifícios</a> </li>
      </ul>
    </li>
    <li><a href="#">Contato</a> </li>
  </ul>
</nav>

You can even do this very little CSS without class nor id :

ul a +ul {
  max-height:0;
  overflow:hidden;
  transition:0.5s linear;
  }
ul a:focus + ul {
  max-height:15em;
  }
/* only select that link , here using the href attribute */
a[href="nowhere"]:focus {
  pointer-events: none;
}

<nav>
    <ul>
        <li><a href="#nowhere">Home</a>
            <ul>
              <li>item</li>
              <li>item</li>
              <li>item</li>
              <li>item</li>
              <li>item</li>
            </ul>
        </li>
        <li><a href="#nowhere">A Empresa</a>
            <ul>
              <li>item</li>
              <li>item</li>
            </ul>
        </li>
        <li><a href="#nowhere" >Portfolio</a>
            <ul>
                <li><a href="#">Comerciais</a> </li>
                <li><a href="#">Residenciais</a> </li>
                <li><a href="#">Institucionais</a> </li>
                <li><a href="#">Edifícios</a> </li>
            </ul>
        </li>
        <li><a href="#">Contato</a>
            <ul>
              <li>item</li>
              <li>item</li>
              <li>item</li>
            </ul>
        </li>
    </ul>
</nav>