How to duplicate this AJAX effect?

[vk101]

If you look on this page you'll see a 'View Source' link at the bottom. When you click it, the page extends and displays some more information.

How can I duplicate this effect using Seam/RichFaces?

And is there a simple way to retrieve the extra information that's displayed when 'View Source' is clicked using AJAX, or is it only easy to have it pre-rendered and hidden until the link is clicked (as I believe is the case in this example)?

Thanks.

[leonardinius]

Smth like this?

[damianharvey.damianharvey.gmail.com]

You could use either Scriptaculous or jQuery. I find the rich:jQuery rather useful for nice showing/hiding of content. For example:

<rich:jQuery name="toggleSource" timing="onJScall" selector="#source" query="slideToggle('slow')" />

<a onclick="toggleSource();">View/Hide Source</a>

<div id="source" style="display:none;">
   lots of source code
</div>

If you want to retrieve information from the server you can replace the <a> with an <a4j:commandLink> that calls whatever action you require, reRenders the content (based on the id) and then in the oncomplete attribute calls the javascript method to show the content (eg. toggleSource).

Cheers,

Damian.