expand div when use clicks in text box?

Question

I'd like to have a div expand to show contents when a user clicks their mouse in a text box to enter text. I haven't seen that around anywhere before. I know how to make things expand onClick, but can someone point me to what I'm looking for?

Basically, I have an email signup box that I just want to show the input field for the email address, but if the user actually decided to get on the email list, that div will expand to also ask them for their name and zipcode.

Thanks!

I've got jquery already set for the email form now, so I'd like to expand on that if possible:

EDIT: Here is what I have so far:

 <div class="outeremailcontainer">
    <div id="emailcontainer">
    <?php include('verify.php'); ?>
      <form action="emailform.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" id="emailFrom name" 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>
                <div id="details">
                         Testing
                </div>
      </form>
    <div class="clearing">
        </div>
        </div>

<script language="javascript" type="text/javascript">
    $("#name").focus(function() {
      $("#details").fadeIn();
    });

    $("#name").focus(function() {
      $("#details").stop().fadeIn();
    }).blur(function() {
      $("#details").stop().fadeOut();
    });

</script>

Answer 1

You can use focus instead of click on the textbox.

$("#txtBoxID").focus(function(){
    $("#yourdivid").show("slow");
});

If you want to have a slideDown effect then you can use slideDown

$("#yourdivid").slideDown("slow");

Answer 2

You can use the focus() event for this. Use classes as a marker if you want this for several elements and need the ID for other things. You may want to add a blur() event as well. Assuming markup:

<input type="text" id="name" class="info">
<div id="name_info" class="details">...</div>

with CSS:

div.details { display: none; }

do this:

$(".info").focus(function() {
  $(this.id + "_info").stop().fadeIn();
}).blur(function() {
  $(this.id + "_info").stop().fadeOut();
});

The stop() call is useful to stop any currently running animations on the div and is a good habit to get into when you run multiple animations due to different events.

So add this functionality to any input element:

• Give it any ID you want;
• Give it a class of "info";
• Create a <div> with an ID of the input's ID with "_info" at the end; and
• Give that <div> a class of "details".

Now you may want to position this next to the input element too. If so, change the CSS:

div.details { display: none; position: absolute; }

and Javascript:

$(".info").focus(function() {
  var offset = $(this).offset();
  var height = $(this).outerHeight();
  $(this.id + "_info").attr({
    top: offset.top + height + 5,
    left: offset.left
  }).stop().fadeIn();
}).blur(function() {
  $(this.id + "_info").stop().fadeOut();
});

Tweak the offsets as necessary.