.slide从底部向上而不是从顶部向下切换

Question

So I'm trying to display a privacy policy on a single page site. The link is in the footer, and the privacy policy is in a display:none div above it. I'm trying to make the content div slide up from the bottom of the footer, pushing all the content above it up.

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");
   });

});

I've tried a couple of different things out, and I can't seem to get anything to work. I'm rather inexperienced with jQuery

Answer 1

New snippet:

 $(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>