How do you make the "add a result" button google uses? is that CSS? Java? Ajax?

It's the effect where you click on a link or a button and a new bit of content appears, pushing down everything below it. Clicking it again makes that content disappear and all the original text move back up. Google uses it in a number of places, notably at the bottom of any search result. For example: http://www.google.com/search?q=anything

At the very bottom, below the "Goooogle" page number thing, there's a little plus sign to the left of "Add a result". Clicking that makes new content appear. I see it in a lot of places and I love the effect! I don't know if its Ajax or CSS or whatever, so I don't know how to properly search for a tutorial, but could anyone point me in the right direction?

one way this can be achieved is using jquery and a combination of hide/show or toggle..


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$("a.add-more").live("click", function() {
$('#add-more-box').toggle("slow");
});
</script>


if you include the jquery library, and use this markup


/* CSS Style */
#add-more-box { display:hidden; width:200px; height:50px; padding:5px; border:1px solid #000; background-color:#c4c4c4; }

/* html */
<a class="add-more" href="#">Click to add more</a>
<div id="add-more-box">
some content that will appear
</div>


this is just a very very basic example but with the necessary knowledge you can accomplish an effect similar to googles.

http://docs.jquery.com/Main_Page