How to slide content opening up with jquery

<div id="footer">
     <div id="expandingFooter"> hidden content</div>
        content that is always visible
 </div>

$('#expandingFooter').slideToggle();

$('#toggleButton').bind('click', function(e) {
        $('#expandingFooter').toggle('slide', {easing: 'easeOutQuint', direction: 'down'}, 1000);
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Untitled</title>
    <script type="text/javascript" src="shared-scripts/jquery-1.2.4b.js"></script>
    <script type="text/javascript">
    <!--
  $(document).ready(function(){
    $("#footer").click(function () {
      if ($("#expandingFooter").is(":hidden")) {
        $("#expandingFooter").show("slow");
      } else {
        $("#expandingFooter").slideUp();
      }
    });
    $("#expandingFooter").hide();
  });
    //--></script>

</head>

<body>
 <div id="footer">
     <div id="expandingFooter"> hidden content</div>
        content that is always visible
 </div>
</body>
</html>

<a id="toggle">Toggle()</a>

<div id="slide" style="position:relative; height: 100px">

    <div id="slideInner" style="position:absolute; bottom: 0; background: lightblue"">
        <p>Suspendisse potenti. Vivamus libero. Dummy Text</p>
    </div>

</div>


<script type="text/javascript">
    $('.hoverable').hover( function() { $(this).find("div").show(); },
                       function() { $(this).find("div").hide(); } );

    $('#toggle').click(function () {
        $('#slideInner').slideToggle();
    });
</script>