Question

I’m trying to achieve the effect of a horizontal accordion using exclusively CSS for animations and layout. So I have 4 columns set up and the main difference with a classic accordion is that when I click on a column, instead of expanding in one direction, it should expand in both directions and push the other columns left and right.

Here’s a compact version of my code right now : http://jsfiddle.net/4ZGmj/183/

If you click on the red column, it works exactly as intended: the column is expanded in both directions and all other columns are pushed to the right. Now if you click on the green column, you’ll notice something different: the column expands in both directions as intended, but it only pushes columns to the right while overlapping the column to the left. What I would like is for each column to push all neighboring columns when expanded.

I guess it might have to do with the fact that my columns are floated left. Do you guys have any insight on what is causing this behavior and what I can do to fix it ?

Thanks in advance

Answer 1

I was able to fix it and get the intended effect by removing the negative margin value from the “animate” class (this was responsible for expanding in both ways, but also caused the overlapping to the left). Instead, I added a new class “pushleft” that has this negative margin value and that I always apply to the first column. You can see the effect and get a better understanding of the idea here : http://jsfiddle.net/4ZGmj/185/

Thanks for your help, I wouldn’t have fixed it if it wasn’t for your input.