jquery - h3 shifting after it fades in or out -

i have been finishing website redesign , wanted add fun new functions it. have contact form nested in footer keep out of sight but, not out of mind. :p have script working , fadetoggle trick fine main header, acting click element, seems twitch side side when activated. hiding li , not ul or h3 not sure why it's moving. ideas appreciated! not life or death me annoy hell out of me ha.

live site

jsfiddle before fix

jsfiddle fixed

html

<div class="forms">     <span class="footert">© copyright 2013 ohio association of health underwriters</span>     <form action="" method="post">       <ul>         <h4>contact (click here)</h4>         <input type="hidden" name="subject" value="submission" />          <input type="hidden" name="redirect" value="thankyou.html" />         <li><label for="name">name</label>         <input type="text" name="name" id="name"></li>          <li><label for="zip">zip</label>         <input type="text" name="zip" id="zip"></li>          <li><label for="city">city</label>         <input type="text" name="city" id="city"></li>          <li><label for="telephone">telephone</label>         <input type="text" name="telephone" id="telephone"></li>          <li><label for="email">email</label>         <input type="text" name="email" id="email"></li>          <li><label for="comments">i know:</label>         <textarea name="comments" id="comments" cols="40" rows="5"></textarea></li>          <li><button name="submit" type="submit" class="submit" id="submit" value="submit">submit</button></li>          <input type="hidden" name="form_order" value="alpha"/>         <input type="hidden" name="form_delivery" value="hourly_digest"/>         <input type="hidden" name="form_format" value="text"/>       </ul>   </form> </div> 

css

/* contact form page */  .forms { width: 960px; margin: 0 auto; padding: 0; }  form > ul           { font-size: 18px; padding: 0; margin: 0; float: right;     list-style-type:none; }  form > ul > li { padding: 5px; display: none; }  form {  text-align:left;  padding: 0 10px 10px 10px; height: 408px; }  .forms > form > ul > li > label     { float: left; width: 50px; margin:5px 10px 0 0; text-align:right; display:block; background:none; font-weight:bold; font-family: arial, helvetica, sans-serif; font-size: 12px; }  input:focus, textarea:focus { background: rgba(0, 0, 0, 0.1); border-radius: 5px; color: #fff; text-shadow: 0 1px 0 #2b2b2b; }  textarea { width: 150px;  height: 50px; border: 3px solid rgba(255, 255, 255, 0.5);  padding:5px;  background: rgba(0, 0, 0, 0.1);  border-radius: 5px; box-shadow: 0 1px 3px #2b2b2b inset; resize: vertical; }  .forms > form > ul > li > input { width: 150px;  height: 15px; border: 3px solid rgba(255, 255, 255, 0.5);  padding:5px;  background: rgba(0, 0, 0, 0.1);  border-radius: 5px; box-shadow: 0 1px 3px #2b2b2b inset; } 

jquery

$('form ul h4').on('click', function() {      $('form > ul > li').stop(true).fadetoggle(1500);  }); 

(p.s. know input tags can not go inside ul , fixing previous developers mistakes on contact form >.>. @ least had deal myself rest of site's design/development!)

the width of <ul> determined visible items inside it. need specify width on <ul> wide visible version of contact form. example:

form > ul {     width: 240px; }