Slide A Div Into Appearance Without JQuery

I am using onclick method on a link in order to display a div. However, it doesn't slide, it simply appears. How do I make it appear with a slide effect without using jQuery. The r

Solution 1:

It can be done using Javascript setInterval() and clearInterval() functions. See code samples here JavaScript slidedown without jQuery

Solution 2:

You can't apply transition to display property - you can transition scale instead - see demo below:

function view() {
  // add a class to show the element
  document.getElementById('topmenu').classList.add('show');
}

#topbar {
  background-color: yellow;
  overflow: auto;
}

#topmenu {
  transform: scaleY(0); /* scale to zero vertically */
  transform-origin: top; /* set origin to top */
  overflow: hidden;
  transition: transform 1s; /* apply transition to only scale */
}

#topmenu.show {
  transform: scaleY(1); /* scale to full height */
}

<header>
  <div id="topbar">
    <img src="https://via.placeholder.com/50" style="float: left;">
    <span style="float: right;"><a href="#!" onclick="view()">MENU</a></span>
  </div>
  <div id="topmenu">
    some text here
  </div>
</header>