Changer de vol stationnaire pour cliquer?

J’ai récemment mis en place un petit cadre sur mon site Web au bas de la page pour l’agrandir lorsque la souris le survole … C’est le code et tout fonctionne parfaitement.

CSS

#box{ position:absolute; width:300px; height:20px; left: 33%; right: 33%; min-width: 32%; bottom:0; background-color: #353535; } 

javascript

 $('#box').hover(function() { $(this).animate({ height: '220px' }, 150); },function() { $(this).animate({ height: '20px' }, 500); }); 

Mais je suis curieux de savoir comment je changerais ceci pour qu’il s’ouvre et se ferme en un clic plutôt que de laisser la souris le survoler?

• L’événement click déclenche plusieurs fois le problème, comment faire?
• window.onbeforeunload en javascript
• L’élément avec survol, puis cliquez sur supprime l’effet de survol et cliquez à nouveau, ajoute de nouveau
• Changer la couleur du bouton au clic (et rétablir la couleur des autres boutons)
• Est-ce que je deviens fou? jQuery .click () ne semble pas fonctionner

Je l’ai édité pour …

 $('#box').click(function() { $(this).animate({ height: '220px' }, 150); },function() { $(this).animate({ height: '20px' }, 500); }); 

Et cela fonctionne pour ouvrir la boîte. Mais je ne peux pas le refermer avec un autre clic.

Si proche et pourtant si loin! : P

• jQuery: désactiver le clic pendant l’animation
• Incrémentation de variable dans jquery click ()
• Comment fermer le menu en cliquant et quand l’utilisateur clique dessus?
• img thumbnail click remplace la valeur du texte div par le titre de la vignette
• jquery rollovers et états actifs

 $('#box').toggle(function() { $(this).animate({ height: '220px' }, 150); },function() { $(this).animate({ height: '20px' }, 500); }); 

 $('#box').toggle(function() {...}, function() {...}); 

 $('#box').click(function() { if ($(this).is(':visible')) { $(this).hide(); return; } $(this).animate({height: '220px'}, 150); });