Using CSS animation (transition) with onClick event

Question

I'm trying to make a simple button btnAdd that changes one of my new div class so that it makes it visible and at a later date i'll add a cancel button that makes the same div hidden again, however I wanted to do this using animation so I'm trying to use transition: height 1s . But for some reason I can't seem to be able to get it working. Does anyone know where I'm going wrong here?

Thanks in advance,

Matt.

 function open_Add_Menu() { document.getElementById("new").className = "open"; } 

 p { margin: 0; } body { margin: 0; background-color: #f6f4fb; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #666; } .btnAdd { width: 160px; height: 30px; float: right; margin: 0px 30px 0px 0px; background-color: #2f8fcb; border: 2px solid #2f8fcb; border-radius: 3px; color: #fff; font-weight: bold; } #new { width: 50%; height: 0; margin: 30px 45% 10px 5%; transition: height 1s; overflow: hidden; } #new.open { height: 400px; } 

 <form> <div id="btnAdd"> <button class="btnAdd" onclick="open_Add_Menu()">Add New</button> </div> <div id="new"> <div id="new_name"> <p>Name:</p> <input type="text" id="name_tb" autocomplete="off"> </div> <div id="new_add1"> <p>Address Line 1:</p> <input type="text" id="add1_tb" autocomplete="off"> </div> <div id="new_add2"> <p>Address Line 2:</p> <input type="text" id="add2_tb" autocomplete="off"> </div> <div id="new_add3"> <p>Address Line 3:</p> <input type="text" id="add3_tb" autocomplete="off"> </div> <div id="new_post"> <p>Postcode:</p> <input type="text" id="post_tb" autocomplete="off"> </div> <div id="new_number"> <p>Contact Number:</p> <input type="text" id="number_tb" autocomplete="off"> </div> </div> </form> 

Answer 1

You have to use classList.add to add a class in vanilla JS.

 function open_Add_Menu() { document.getElementById("new").classList.add('open'); } 

 p { margin: 0; } body { margin: 0; background-color: #f6f4fb; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #666; } .btnAdd { width: 160px; height: 30px; float: right; margin: 0px 30px 0px 0px; background-color: #2f8fcb; border: 2px solid #2f8fcb; border-radius: 3px; color: #fff; font-weight: bold; } #new { width: 50%; height: 0; margin: 30px 45% 10px 5%; transition: height 1s; overflow: hidden; } #new.open { height: 400px; } 

 <div> <div id="btnAdd"> <button class="btnAdd" onclick="open_Add_Menu()">Add New</button> </div> <div id="new"> <div id="new_name"> <p>Name:</p> <input type="text" id="name_tb" autocomplete="off"> </div> <div id="new_add1"> <p>Address Line 1:</p> <input type="text" id="add1_tb" autocomplete="off"> </div> <div id="new_add2"> <p>Address Line 2:</p> <input type="text" id="add2_tb" autocomplete="off"> </div> <div id="new_add3"> <p>Address Line 3:</p> <input type="text" id="add3_tb" autocomplete="off"> </div> <div id="new_post"> <p>Postcode:</p> <input type="text" id="post_tb" autocomplete="off"> </div> <div id="new_number"> <p>Contact Number:</p> <input type="text" id="number_tb" autocomplete="off"> </div> </div> </div> 

Answer 2

You've done the right thing. The only problem is your button is placed within a form element. Once you click on that button, the form is being submitted.

To fix it, you can replace button by another tag. Or avoid submitting while click event happens.

Answer 3

Add the attribute type='button' to your button element. It should works for you.

<button type="button" class="btnAdd" onclick="open_Add_Menu()">Add New</button>

Answer 4

you can use the atribute visibility:

document.getElementById("myP").style.visibility = "hidden";

You can start the div with visibility hidden and remove that for showing the element.

Its works fine :)