CODEWITHSUNDEEP
zurb-foundation
petebolduc
petebolduc

Reputation: 1263

Zurb Foundation 5 accordion not pushing content below down

I am using Foundation 5 and trying to include a menu inside of an accordion. When the accordion is clicked and expands it works fine but rather than pushing the below content down when opened, it opens over the background of the below content, but under the content of the below content.

I have tried to change the z-index of the accordion to 0 but it does not help. I have also added the clearfix class to no avail.

Can be seen here

Any help or suggestions would be appreciated.

Thanks, Pete

Upvotes: 0

Views: 930

Answers (1)

Marco
Marco

Reputation: 23927

The error is in this line:

 <div class="large-3 medium-4 columns hide-for-small sidebar-wrap" data-equalizer-watch="" style="height: 228px;">

You've set a fixed heigth for the container. Since it is already at max height, it can't expand further down.

remove style="height: 228px;" and everything gets pushed down. If you need a fixed height, so the content doesn't snap up and down everytime the user clicks on the accordion set it to height: 402px;. Thats the value Chrome tells me for 4 elements, with one expanded.

Upvotes: 2

Related Questions