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 transitionscale instead - see demo below:

functionview() {
  // add a class to show the elementdocument.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><divid="topbar"><imgsrc="https://via.placeholder.com/50"style="float: left;"><spanstyle="float: right;"><ahref="#!"onclick="view()">MENU</a></span></div><divid="topmenu">
    some text here
  </div></header>