.slideToggle сверху вниз, а не сверху

Question

Так что я пытаюсь отобразить политику конфиденциальности на сайте одной страницы. Ссылка находится в нижнем колонтитуле, и политика конфиденциальности находится на дисплее: ни один div над ней. Я пытаюсь сделать div div контента со дна нижнего колонтитула, подталкивая весь контент выше него.

HTML

<section id="privContent" class="spotlight"> 
    <div class="content"> 
     <h2>Privacy Policy</h2> 
     <p>Lorem Ipsum</p> 
    </div> 
</section> 

<section class="spotlight"> 
    <div class="content"> 
     <a target="self" class="privClick">Privacy Policy</a> 
    </div> 
</section> 

JS

$(function() { 
    $('a[target="self"]').click(function(e) { 
     e.preventDefault(); 
    $('#privContent').slideToggle('2000', "swing"); 
    }); 

}); 

Я пытался несколько различных вещей, и я не могу показаться, чтобы получить что-нибудь работать. Я довольно неопытных с JQuery

Answer 1

Новый сниппета:

$(function() { 
 
    $('#privContent').hide(); 
 
    $('.privClick').click(function(e) { 
 
    $('#privContent').css('position', 'fixed').css('bottom', '0').slideToggle('2000', "swing").delay(2000).queue(function (next) { 
 
     $(this).slideToggle('2000', "swing"); 
 
     next(); 
 
    });; 
 
    }); 
 
});

<script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
 

 

 

 
<section id="privContent" class="spotlight"> 
 
    <div class="content"> 
 
     <h2>Privacy Policy</h2> 
 
     <p>Lorem Ipsum</p> 
 
    </div> 
 
</section> 
 

 
<section class="spotlight"> 
 
    <div class="content"> 
 
     <a href="#" target="blank">TDI</a> | <p class="privClick">Privacy Policy</p> 
 
    </div> 
 
</section>