développez div lorsque l'utilisateur clique dans la zone de texte?

Question

Je voudrais avoir un div développer pour afficher le contenu lorsqu'un utilisateur clique sur sa souris dans une zone de texte pour entrer du texte. Je n'ai jamais vu ça auparavant. Je sais comment faire grossir les choses sur Click, mais quelqu'un peut-il me diriger vers ce que je cherche? Fondamentalement, j'ai une boîte d'inscription d'email que je veux juste montrer le champ de saisie pour l'email address, mais si l'utilisateur a réellement décidé d'entrer sur la liste d'email, ce div développera également pour leur demander leur nom et code postal.

Merci!

J'ai jquery déjà défini pour le formulaire courriel maintenant, donc je voudrais développer que si possible:

EDIT: Voici ce que j'ai jusqu'à présent:

<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

Vous pouvez utiliser focus au lieu de cliquer sur la zone de texte.

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

Si vous voulez avoir un effet slideDown alors vous pouvez utiliser slideDown

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

Answer 2

Vous pouvez utiliser l'événement focus() pour cela. Utilisez des classes comme marqueur si vous le souhaitez pour plusieurs éléments et avez besoin de l'ID pour d'autres choses. Vous pouvez également ajouter un événement blur(). balisage En supposant:

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

avec CSS:

div.details { display: none; } 

faire ceci:

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

L'appel stop() est utile pour arrêter les animations en cours d'exécution sur le div et est une bonne habitude à entrer dans lorsque vous exécutez plusieurs animations en raison de différents événements.

ajouter donc cette fonctionnalité à tout élément d'entrée:

• Donnez-lui une ID que vous voulez;
• Donnez-lui une classe de "info";
• Créer un <div> avec un ID de l'ID d'entrée avec "_info" à la fin; et
• Donnez une <div> une classe de "détails".

Maintenant, vous pouvez également le positionner à côté de l'élément d'entrée. Dans ce cas, changer le CSS:

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

et 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 les compensations nécessaires.