Расширение Div с использованием jQuery slideToggle

Question

Может кто-нибудь пролить свет на это для меня:

http://67.212.188.229/fcf/index.html <- Пожалуйста, посмотрите на правые боковые панели, я бы хотел, чтобы пользователь щелкнул по любому из них и увеличил поле с его содержанием. У меня есть щелчок и контент, но по какой-то причине я не могу заставить div расширяться вместе с контентом. </p>

Любая помощь получена.

С уважением,

мм

Answer 1

У вас есть этот стиль с этим <form class="fcfSamplePack">:

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

Вам нужно удалить этот position: absolute;, тогда он будет работать как положено, в настоящее время он не занимает места внормальный поток, означающий, что <div>, в котором он находится, не будет расширяться, чтобы приспособиться к нему.Простое удаление этого стиля исправит проблему:)

Answer 2

Что я увидел в chrome, так это то, что ваш div работал, но текстовые поля были шире, чем div. Также у div не было цвета фона, поэтому я мог видеть содержимое под ним. Я пытаюсь поместить следующий стиль div, он выглядел немного лучше background-color: white; border: 1px red solid; padding: 10px;. Причина, по которой текстовые поля становятся шире, заключается в том, что применяемый к ним стиль имеет отступ в 2 пикселя, который увеличивает их ширину на 4 пикселя в дополнение к ширине в 100%. Также любая ширина, примененная к входам, добавляется по ширине. Таким образом, текстовые поля становятся шире. Так что другой вариант для вас - установить ширину текстовых полей на 90%.

Я также заметил, что когда я нажимаю на вход, div скрывается. Также, когда я нажимаю на вторую кнопку один раз и на первой кнопке, отображаются оба div.