expand div with focus-jquery

Question

Hi guys, I'm revisiting this after a few weeks, because I could never get it to work before, and hoping to now.

Please look at this website-notice the newsletter signup form at the top right.

http://www.rattletree.com

I am wanting it to look exactly this way for now, but when the user clicks in the box to enter their email address, the containing div will expand (or simply appear) above the email field to also include a "name" and "city" field.

I'm using jquery liberally in the sight, so that is at my disposal. This form is in the header so any id info, etc can't be withing the body tag...

This is what I have so far:

 <div class="outeremailcontainer">
    <div id="emailcontainer">
    <?php include('verify.php'); ?>
      <form action="index_success.php" method="post" id="sendEmail" class="email">
        <h3 class="register2">Newsletter Signup:</h3>
        <ul class="forms email">
            <li class="email"><label for="emailFrom">Email: </label>
                 <input type="text" name="emailFrom" class="info" id="emailFrom" value="<?= $_POST['emailFrom']; ?>" />
                 <?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>'; 
                 ?>
            </li>

           <li class="buttons email">
               <button type="submit" id="submit">Send</button>
               <input type="hidden" name="submitted" id="submitted" value="true" />
           </li>

        </ul>
      </form>
    <div class="clearing">
    </div>
       </div>

css:

p.emailbox{
text-align:center;
margin:0;
}

p.emailbox:first-letter {
 font-size: 120%;
 font-weight: bold;
 }

.outeremailcontainer {
height:60px;
width: 275px;
background-image:url(/images/feather_email2.jpg);
/*background-color:#fff;*/
text-align:center;
/* margin:-50px 281px 0 auto ; */
float:right;
position:relative;
z-index:1;
}


form.email{
position:relative;
}


#emailcontainer {
margin:0;
padding: 0 auto;
z-index:1000;
display:block;
position:relative;
}

Thanks for any help!

Joel

Answer 1

Hiya! I posted a demo for you. Basically the extra inputs are inside the form, but hidden. When you give focus to the email input, the hidden elements are revealed. I revealed them using the .slideDown() function, but you can replace that with any kind of animation. I also added an overlay which appears under the input box, you can adjust the CSS to make it completely transparent if you wish because the real purpose of the overlay is to hide the extra inputs when it is clicked on.

HTML (I stripped out the php for the demo)

<div class="outeremailcontainer">
 <div id="emailcontainer">
  <form action="index_success.php" method="post" id="sendEmail" class="email">
   <h3 class="register2">Newsletter Signup:</h3>
   <ul class="forms email">
    <li class="name"><label for="yourName">Name: </label>
     <input type="text" name="yourName" class="info" id="yourName" value=" " /><br>
    </li>

    <li class="city"><label for="yourCity">City: </label>
     <input type="text" name="yourCity" class="info" id="yourCity" value=" " /><br>
    </li>

    <li class="email"><label for="emailFrom">Email: </label>
     <input type="text" name="emailFrom" class="info" id="emailFrom" value=" " />
    </li>

    <li class="buttons email">
     <button type="submit" id="submit">Send</button>
     <input type="hidden" name="submitted" id="submitted" value="true" />
    </li>

   </ul>
  </form>
</div>

Script

$(document).ready(function(){

 $('#emailFrom')
  .focus(function(){
   if ($('#overlay').length) { return; } // don't keep adding overlays if one exists
   $('#sendEmail')
    .css({ backgroundColor: '#ddd' })
    .find('.name, .city').slideDown(300, function(){ $(this).show(); }); // added so this works in IE
   $('.outeremailcontainer').css({ position: 'relative', bottom: 0, left: 0, zIndex : 1001 });
   $('<div id="overlay"></div>').appendTo('body');
  });

 $('#overlay').live('click', function(){
   $('#sendEmail')
    .css({ backgroundColor : 'transparent' })
    .find('.name, .city').slideUp(300);
   $('.outeremailcontainer').css({ position : 'static' });
   $('#overlay').remove();
  });

});