slideToggle wont push down a div below

Question

First, here's the link to JSFIDDLE: http://jsfiddle.net/chani987/uu693a0v/

Upon a click on choice 1 or choice 2 link, .hiddenbox div pops out.

The slideToggle javascript is working fine. The problem is that I was expecting the footer div to be pushed down when .hiddenbox div is toggled, but the footer stays where it was and .hiddenbox div overlaps with the footer.

I've tried changing position: absolute to position: none; for .hiddenBox, but it would cause the div to position on the top of the page instead. Is there a way to make the footer div to slide down as a hiddenBox pops while the hiddenBox comes right after the previous divs?

It's my first time posting on stackoverflow. If I haven't provided needed or enough resources, please let me know! Thanks

Answer 1

This works, there is probably a better way though. Add

Position:relative;top:0px;

To your #main_footer css.

 $('#audience_text').click(function(){ $("#artist_type").slideUp('slow'); $("#audience_type").slideToggle('slow'); var a =$("#main_footer").css("top"); a=="0px"?$("#main_footer").css("top","+=200"):$("#main_footer").css("top","0"); }); $('#artist_text').click(function(){ $("#audience_type").slideUp('slow'); $("#artist_type").slideToggle('slow'); var a =$("#main_footer").css("top"); a=="0px"?$("#main_footer").css("top","+=200"):$("#main_footer").css("top","0"); }); 

Here's a Fiddle