JavaScript slidedown()

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

var container = document.getElementById("cntc");
function toggle(el) {
  container.classList.toggle('hide');
  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="https://formspree.io/f/moqpwpwp" method="POST">
            <table class = 'tbl'>
                <tr>
                    <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>
                    
                </tr>
                <tr>
                    <td><label text="message">Message</label></td>
                    <td><textarea id = 'frmMessageBox'  name = 'message' cols = '40' rows = '3'></textarea></td>
                </tr>
            </table>
        </form>
    </div>
</div>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top