does jQuery have an effect like this? This is using prototype

Question

http://blog.posterous.com/ Click on the comments link.

Notice how the comments are loaded, kind of sliding down. ALso when you click on 'hide'.

Answer 1

It's called slideDown().

It's done in two steps:

1. First the container of the comments is slid (so it pushes the content down).
2. Then comments themselves slide down within this container.

But you might have to load your comments using the ajax functions provided in jQuery.

Answer 2

It looks more or less like

• an ajax call followed by a slideDown() (and maybe a small amount of easing) when clicking on comments

• and a slideUp() when clicking on hide

unless I'm missing something?

Answer 3

xhr.html:

<style>
    div.comments { display:none; }
</style>

    <div class="comment-wrap">
    <a href="#" class="comments" rel="300">comments</a>
    <div class="comments"></div>
    </div>

    <div class="comment-wrap">
    <a href="#" class="comments" rel="301">comments</a>
    <div class="comments"></div>
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
<script>
$(function() {
    $('a.comments').each(function() {
    var el = this;
    $(this).toggle(function(e){
        e.preventDefault()
        $.ajax({
     url:'content.php',
     data:{id:$(el).attr('rel')},
     type:'GET',
     success:function(html) {
         $(el).next().html( html ).slideDown('slow');
     }
        });
    }, function(e) {
        $(el).next().slideUp('slow');
    });
    });
});
</script>

content.php ( mimicing fetching database results ):

<?php
    $id = (int)$_GET['id'];

    switch ( $id ) {
    case '300':
        $content = '
        lorem ipsum dolor sit amet<br>
        lorem ipsum dolor sit amet<br>
        lorem ipsum dolor sit amet<br>
        lorem ipsum dolor sit amet<br>
        lorem ipsum dolor sit amet<br>
        ';
    break;

    case '301':
        $content = '
        lorem ipsum dolor sit amet<br>
        lorem ipsum dolor sit amet<br>
        lorem ipsum dolor sit amet<br>
        lorem ipsum dolor sit amet<br>
        lorem ipsum dolor sit amet<br>
        ';
    break;

    default:break;
    }
    echo $content;
?>

And just make sure content.php spits out data. You can program it as you like,