L'expansion de la division en utilisant jQuery slideToggle

Question

Quelqu'un peut-il faire la lumière sur ce point pour moi:

http://67.212.188.229/fcf/index.html < - S'il vous plaît regarder les panneaux latéraux de la main droite, je voudrais à l'utilisateur de cliquer sur l'un et ont la boîte d'élargir son contenu. J'ai le clic et le contenu, mais pour la raison que je ne peux pas obtenir le div de développer avec le contenu.

Toute aide est grandement appréciée.

Cordialement,

mm

Answer 1

Vous avez ce style se passe avec cette <form class="fcfSamplePack">:

.fcfSamplePack { 
    position: absolute; 
    width: 247px; 
    margin: 10px; 
    display:none; 
    margin-top: 10px; 
} 

Vous devez supprimer cette position: absolute;, il va fonctionner comme prévu, actuellement il n'occupe pas d'espace dans le flux normal, ce qui signifie que le <div> n'est pas en expansion pour l'accommoder. Il suffit de retirer ce style corrigera le problème :)

Answer 2

Ce que je vis en chrome était que votre div travaillait, mais les zones de texte sont plus larges que la div. De plus, la div n'avait pas de couleur de fond, donc je pouvais voir le contenu en dessous. Je tente de mettre le style suivant de la div et il semblait un peu mieux background-color: white; border: 1px red solid; padding: 10px;. La raison pour laquelle les boîtes de texte deviennent plus larges est que le style appliqué sur eux a un padding 2px qui augmente leur largeur avec 4px en plus de la largeur de 100%. Toute bordure appliquée aux entrées est également ajoutée dans la largeur. De cette façon, les zones de texte deviennent plus larges. Une autre option pour vous consiste à définir la largeur des zones de texte à 90%.

J'ai également remarqué que lorsque je clique sur une entrée, la div cache. Aussi quand je clique sur le deuxième bouton une fois et sur le premier bouton, les deux div sont visibles.