JavaScript slidedown()

You can use a transition in css. Here’s a working solution.

var container = document.getElementById("cntc");
function toggle(el) {
  el.innerText = container.classList.contains('hide') ? 'Show DIV' : 'Hide DIV';
.box {
      width: 450px;
      height: 100px;
      overflow: hidden;
      background: #D8E9F8;
      transition: all 0.4s ease-in-out;
    .hide {
      height: 0;
<div id = 'Contact'>    
     <a href = '#' value = 'Show Div' onclick = "toggle(this);" class = 'btnForm'><i class="fas fa-envelope-open-text"></i>Show DIV</a>
    <div id="cntc" class="box hide">
        <form id = 'cntc' action="" method="POST">
            <table class = 'tbl'>
                    <td><label text="_replyto">Email</label></td>
                    <td><input id = 'frmName' type = 'text'><button name = 'submit' class = 'btnSubmit' type="submit" target = '_blank'>Send</button></td>
                    <td><label text="message">Message</label></td>
                    <td><textarea id = 'frmMessageBox'  name = 'message' cols = '40' rows = '3'></textarea></td>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top