ansaurus

Question

How to slide content opening up with jquery

Answer 1

A:

Try something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<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>

cLFlaVA 2008-12-12 18:45:21

Answer 2

A:

My solution is a bit of a trick. The slideUp() function the way you want is not build in JQuery because the way you can achieve it depends on your html/css design. Normal flow is from top to bottom.

I suggest this:

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

This code is just an example. Move the inline css to an external sheet. Idem for the javascript.

If you want the 'slide' div to disapeare, add a callback to the slideToggle() function a call hide() on the 'slide' div.

Sander Versluys 2008-12-12 18:51:53

Answer 3

+5 A:

You can leverage JQuery UI 1.6's Effects (Effects Demo Page). The following accomplished the desired effect for me.

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

Note: You may want to play with the easing parameter to get the desired smoothness of the effect.

You'll need to have the latest versions of both JQuery and JQuery UI Slide Effect to do this.

Manik 2008-12-12 19:07:52

ansaurus

tags:

views:

answers:

How to slide content opening up with jquery

related questions