Display the div tag hidden content above the button on button click

Question

I want to display the div tag hidden content above the button on button(Add Address) click and at the same time shift the button below the div tag content and again on cancel button click put the button to the original position. I am doing the code in a .tpl file.

  function addPickupAddress() { $("#addPickupAddressForm").show(); } 

 <div id="addPickupAddressForm" style="height:100px;display: none;"> <span style="font-size:20px">Add Pickup Address</span> <table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2"> <tr> <td> Title </td><td> <input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title"> </td> </tr> <tr> <td> First Name </td><td> <input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name"> </td> </tr> <tr> <td> Last Name </td><td> <input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name"> </td> </tr> <tr> <td> Address </td><td> <input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address"> </td> </tr> <tr> <td> Address2 </td><td> <input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address"> </td> </tr> <tr> <td> City </td><td> <input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name"> </td> </tr> <tr> <td> State </td><td> <input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name"> </td> </tr> <tr> <td> PinCode </td><td> <input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode"> </td> </tr> <tr> <td> Phone <span style="float: right;">+91</span></td><td> <input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name"> </td> </tr> </table> </div> <button type="button" id="addbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;padding-top: 10px;cursor:pointer;float: left; margin-left:120px; margin-bottom:10px;" onclick="addPickupAddress();">Add Address</button> 

Answer 1

Just remove the float on the button and the fixed height of your hidden div , and the button will appear under the div as expected. To hide the div again, you can use jQuery's toggle() function. Also try not to use inline styles as it will make your code much less readable.

 function addPickupAddress() { $("#addPickupAddressForm").toggle(); $("#addbuttonpickup").html($("#addbuttonpickup").html() == 'Cancel' ? 'Add Address' : 'Cancel'); } 

 button { color: white; background-color: #0899C9; padding: 5px; padding-top: 10px; cursor: pointer; margin-left: 120px; margin-bottom: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="addPickupAddressForm" style="display: none;"> <span style="font-size:20px">Add Pickup Address</span> <table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2"> <tr> <td> Title</td> <td> <input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title"> </td> </tr> <tr> <td> First Name</td> <td> <input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name"> </td> </tr> <tr> <td> Last Name</td> <td> <input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name"> </td> </tr> <tr> <td> Address</td> <td> <input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address"> </td> </tr> <tr> <td> Address2</td> <td> <input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address"> </td> </tr> <tr> <td> City</td> <td> <input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name"> </td> </tr> <tr> <td> State</td> <td> <input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name"> </td> </tr> <tr> <td> PinCode</td> <td> <input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode"> </td> </tr> <tr> <td> Phone <span style="float: right;">+91</span> </td> <td> <input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name"> </td> </tr> </table> </div> <button type="button" id="addbuttonpickup" onclick="addPickupAddress();">Add Address</button> 

Answer 2

Check following code. Its implemented according to your requirement

 function addPickupAddress() { $("#addPickupAddressForm").show(); $("#cancelbutton").show(); $("#addbuttonpickup").hide(); } function hidePickupAddress() { $("#addPickupAddressForm").hide(); $("#cancelbutton").hide(); $("#addbuttonpickup").show(); } 

 .buttonstyle { color: white; background-color: #0899C9; padding: 5px; padding-top: 10px; cursor: pointer; float: left; margin-left: 120px; margin-bottom: 10px; } 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="addPickupAddressForm" style="display: none;"> <span style="font-size: 20px">Add Pickup Address</span> <table id="addAddressTable" style="width: 470px; margin-left: 110px;" cellpadding="2"> <tr> <td>Title</td> <td><input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title"></td> </tr> <tr> <td>First Name</td> <td><input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name"></td> </tr> <tr> <td>Last Name</td> <td><input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name"></td> </tr> <tr> <td>Address</td> <td><input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address"></td> </tr> <tr> <td>Address2</td> <td><input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address"></td> </tr> <tr> <td>City</td> <td><input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name"></td> </tr> <tr> <td>State</td> <td><input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name"></td> </tr> <tr> <td>PinCode</td> <td><input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode"></td> </tr> <tr> <td>Phone <span style="float: right;">+91</span></td> <td><input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name"></td> </tr> </table> </div> <button type="button" id="addbuttonpickup" class="buttonstyle" onclick="addPickupAddress();">Add Address</button> <button type="button" id="cancelbutton" class="buttonstyle" style="display:none" onclick="hidePickupAddress();">Cancel</button> 

Answer 3

Try using the jquery toggle-function . Look at this Pen to see how it's used: http://codepen.io/anon/pen/rrxYxq

function addPickupAddress ()
{
      $("#addPickupAddressForm").toggle();  
}

Also, the Button appears to be inside the form when it's visible because it's height is set to 100px but the children inside the element are actually higher. Remove it and the height will be calculated automatically.

Answer 4

Replace Height 100px to 100% for display in full height.

And Put Cancel button in below div.

Try below code.

 function addPickupAddress(isVisible) { if(isVisible){ $("#addPickupAddressForm").show(); $('#Cancelbuttonpickup').show(); } else{ $("#addPickupAddressForm").hide(); $('#Cancelbuttonpickup').hide(); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="addPickupAddressForm" style="height:100%;display: none;"> <span style="font-size:20px">Add Pickup Address</span> <table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2"> <tr> <td> Title </td><td> <input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title"> </td> </tr> <tr> <td> First Name </td><td> <input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name"> </td> </tr> <tr> <td> Last Name </td><td> <input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name"> </td> </tr> <tr> <td> Address </td><td> <input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address"> </td> </tr> <tr> <td> Address2 </td><td> <input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address"> </td> </tr> <tr> <td> City </td><td> <input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name"> </td> </tr> <tr> <td> State </td><td> <input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name"> </td> </tr> <tr> <td> PinCode </td><td> <input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode"> </td> </tr> <tr> <td> Phone <span style="float: right;">+91</span></td><td> <input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name"> </td> </tr> </table> </div> <button type="button" id="addbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;cursor:pointer;float: left; margin-bottom:10px;" onclick="addPickupAddress(true);">Add Address</button> <button type="button" id="Cancelbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;cursor:pointer;float: left; margin-bottom:10px;display:none;" onclick="addPickupAddress(false);">Cancel</button> 

Answer 5

You just have to do this

function addPickupAddress(isShow)
{
    $("#addPickupAddressForm,#cancel")[isShow?"show":"hide"]();
}

Plus you have to remove the fixed size of your div content.

Have created a fiddle for same, check it out here