Question

i really need help, i can’t see something that is obvious, and usually then it is the best to ask for help.
I have 4 divs in a 12 column grid.Each div is clickable, and when clicked should display the corresponding div beneath it, that is initially set to display:none.

Everything is fine as long as i click on them in order from first to last, but if i first click, let’s say on third div, it shows its corresponding div, but not beneath it, it shows it in place of the first corresponding div.

I am using simple slideToggle here, and really can’t understand what is wrong.If i put the corresponding divs(the hidden ones) to visible, they are all displayed correctly, so it is not a CSS error.

I can provide the code, but i put it online, just click on methods tab, and you will see what i mean.

Here is the link

Sorry if i didn’t explain it better, english is not my native language.Thanks!

Answer 1

You need to keep space for these div’s. Use visibility:hidden and animation but do not use display:none which doesn’t keep space for hidden element. All built-in effect functions like hide(), slideToggle() etc. will set display:none to your element.