slideToggle обыкновение толкать вниз DIV ниже

Question

Во-первых, вот ссылка на JSFIDDLE: http://jsfiddle.net/chani987/uu693a0v/

После щелчка на choice 1 или choice 2 ссылку, .hiddenbox ДИВ выскакивает.

Javascript слайдов работает отлично. Проблема в том, что я ожидал, что нижний колонтитул будет нажат вниз, когда будет включен div .hiddenbox div, но нижний колонтитул остается там, где он был, и .hiddenbox div перекрывается с нижним колонтитулом.

Я попытался изменить position: absolute на position: none; на .hiddenBox, но это приведет к тому, что div будет размещаться в верхней части страницы. Есть ли способ сделать нижний колонтитул сползающим вниз, так как скрытая поп-панель появляется, а hiddenBox появляется сразу после предыдущих разделов?

Это мой первый пост, посвященный stackoverflow. Если я не предоставил необходимые или достаточные ресурсы, пожалуйста, дайте мне знать! Спасибо

Answer 1

Это работает, вероятно, лучший способ. Add

Position:relative;top:0px; 

К вашему #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"); 
 

 
});

Вот Fiddle