There is a form. I want to make the form stretch when disclosing the description. For now, I just set a margin so that the text doesn't crawl out of the box.
$( document ).ready(function() { /*focus*/ /*placeholder*/ $("input").focus(function(){ $(this).parent().children(".label").animate({"margin-top": "-20px"}, 300); $(this).animate({"padding-top": "0px"}, 300); }) $("input").focusout(function(){ $(this).parent().children(".label").animate({"margin-top": "0px"}, 300); $(this).animate({"padding-top": "14px"}, 300); }); /*animate description*/ $("#f-phone, #f-email").children("input").focus(function(){ $(this).parent().parent().children(".i-descr").slideDown(); }); $("#f-phone, #f-email").children("input").focusout(function(){ $(this).parent().parent().children(".i-descr").slideUp(); }); }); @import url('https://fonts.googleapis.com/css?family=Changa+One:400i'); @import url('https://fonts.googleapis.com/css?family=Fira+Sans'); .sect-input select,.sect-input input:active, .sect-input input:focus { outline: none; } .container{ padding-bottom: 70px; } .clr:after { content: ""; display: table; clear: both; } .container{ position: relative; width: 900px; min-height: 600px; margin: 0 auto; border: 1px solid black; background-color: #ccc; } .form{ position: absolute; left: calc(50% - 250px); top: 70px; width: 530px; margin: 0 auto; min-height: 200px; border-radius: 7px; background-color: #fff; overflow: hidden; z-index: 1; } .f-header{ font-family: 'Changa One', cursive; position: relative; background-color: #0072BC; color: #fff; padding: 15px; font-size: 16px; } .f-close{ cursor: pointer; position: absolute; top: 50%; margin-top: -5px; right: 20px; width: 10px; height: 10px; background: url(http://myfrelance.ho.ua/images/f-close.png ) no-repeat; -webkit-background-size: contain; background-size: contain; display: inline-block; } .f-steps{ position: relative; top: -6px; text-align: center; font-size: 14px; font-weight: 200; color: #0072BC; } .f-step{ display: inline-block; text-align: center; margin-left: 10px; width: 90px; } .f-step:first-child{ margin-left: 0px; } .f-steps span{ display: block; position: relative; left: 50%; margin-left: -5px; margin-bottom: 5px; width: 12px; height: 12px; border: 1px solid #0072BC; border-radius: 50%; background-color: #fff; } span.step-active{ background-color: #0072BC; box-shadow: inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff; } .f-content{ padding: 24px; font-size: 12px; font-family: 'Fira Sans', sans-serif; } .f-description{ margin-bottom: 20px; color: #949494; } .sect-input{ position: relative; width: 230px; height: 40px; margin-bottom: 20px; box-sizing: border-box; border: 1px solid #949494; border-radius: 3px; } .sect-input select{ position: absolute; width: 100%; height: 100%; border:none; background: none; appearance: none; -webkit-appearance: none; -o-appearance: none; -moz-appearance: none; -ms-appearance: none; padding: 5px; padding-top: 19px; padding-left: 10px; color: #949494; } .sect-input input{ box-sizing: border-box; color: #949494; padding-top: 14px; padding-left: 9px; background: none; border: none; margin: 0; height: 100%; width: 100%; } .sect-input .label{ padding: 5px; padding-left: 10px; position: absolute; color: #0072BC; font-weight: bold; z-index: -1; } /* ARROW*/ .arrow{ border-left: 1px solid #949494; position: absolute; height: 38px; top: 0px; right: 10px; padding-left: 10px; z-index: -1; } .arrow-down { margin-top: 16px; width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 11px solid #0072BC; } .f-input-item{ float: left; width: 230px; } .f-input-item:nth-of-type(even){ margin-left: 20px; } .f-input-item:nth-child(2){ float: none; margin-left: 0px; } .i-descr{ margin-top: 10px; color:#0072BC; display: inline-block; margin-bottom: 10px; padding: 1px; width: 100%; display: none; } .f-bottom-content{ } <div class="container"> <div class="form clr"> <div class="f-header">Contact form <div class="f-close"></div></div> <div class="f-steps"> <div class="f-step"><span class="step-active"></span>You</div> <div class="f-step"><span></span>Outbound party</div> <div class="f-step"><span></span>Return party</div> </div> <div class="f-content clr"> <div class="f-description"> Description why is it needed, so the user feels encouraged, not discourages by the length of the step </div> <div class="f-input-item"> <div class="sect-input"> <div class="label">Title</div> <select name="Title" value=""> <option value="Mr">Mr</option> <option value="Mis">Mis</option> </select> <div class="arrow"> <div class="arrow-down"></div> </div> </div> </div> <div class="f-input-item"> <div class="sect-input"> <div class="label">Name</div> <input type="text" name="" placeholder="eg John" value=""></input> </div> </div> <div class="f-input-item"> <div class="sect-input"> <div class="label">Surname</div> <input type="text" name="" placeholder="eg Doe" value=""></input> </div> </div> <div class="f-input-item"> <div class="sect-input"> <div class="label">Street</div> <input type="text" name="" placeholder="eg Baker Street 221B" value=""></input> </div> </div> <div class="f-input-item"> <div class="sect-input"> <div class="label">Postal code</div> <input type="text" name="" placeholder="eg 012345" value=""></input> </div> </div> <div class="f-input-item"> <div class="sect-input"> <div class="label">City</div> <input type="text" name="" placeholder="eg Berlin" value=""></input> </div> </div> <div class="f-input-item"> <div class="sect-input"> <div class="label">Country</div> <select name="Title" value=""> <option value="Mr">Germany</option> <option value="Mis">England</option> </select> <div class="arrow"> <div class="arrow-down"></div> </div> </div> </div> <div class="f-input-item"> <div id="f-phone" class="sect-input"> <div class="label">Mobile number</div> <input type="text" name="" placeholder="eg Berlin" value=""></input> </div> <div class="i-descr">Leave your phone number so we can contact you in a case of any ...</div> </div> <div class="f-input-item"> <div id="f-email" class="sect-input"> <div class="label">Email</div> <input type="email" name="" placeholder="eg john@doe.com" value=""></input> </div> <div class="i-descr">We will send you confirmation on this email.If you choose to register, your e-mail is your login.</div> </div> </div> <div class="f-bottom-content"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> With clearfix problems or with what?
To make the inscription appear, you need to click on the "Mobile number" or "Email" field.
