Expanding Div's using jQuery slideToggle

Question

Can anyone shed some light on this for me:

http://67.212.188.229/fcf/index.html <- Please look at the right hand side panels, I would like the user to click on either and have the box expand with its content. I have the click and the content but for the whatever reason I cannot get the div's to expand with the content.

Any help is greatly received.

Regards,

mm

Answer 1

What I saw in chrome was that your div was working, but the text boxes were wider than the div. Also the div didn't have a background color so I could see the content below it. I tries putting the following style of the div an it looked a little bit better background-color: white; border: 1px red solid; padding: 10px;. The reason for text boxes becoming wider is that the style applied on them has a padding 2px that increases they width with 4px in addition to the width of 100%. Also any border applied to the inputs is added in the width. In this way the text boxes become wider. So another option for you is to set the width of the text boxes to be 90%.

I also noticed that when I click in an input the div hides. Also when I click on the second button once and the on the first button, both divs are visible.

Answer 2

You have this style going on with that <form class="fcfSamplePack">:

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

You need to remove that position: absolute;, then it'll work as expected, currently it doesn't occupy any space in the normal flow, meaning that the <div> it's in won't expand to accommodate it. Just removing this style will correct the issue :)