Visibility W/ Ajax

phpnut

I want to display some information on a page, but only until a user chooses not to. For example, I'd like to have some text in a table row, then a user clicks "close" and then the text disappears, but the rest of the page moves up on the page to fill the space. If the user then clicks something, I'd like the text to show back up. I know I can do this with simply filling a div or span with nothing, but I was wondering if there's a better way with CSS or something. Please nothing with frameworks!! Thanks!
If it helps, I'd like this for my user article app, www.naturesmagazine.com/membership/userarticles/index.php , so the user can hide and show their search results while viewing articles.

Nuvo

If you use scriptaculous effects, it's possible to make a page where the user can show and \ or hide parts of the page with AJAX.
This is what I'm using, and it works fairly well:
[html]
<!-- in your head section: -->
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/effects.js" type="text/javascript"></script>

<!-- The toggle link: -->
<a href="#" onclick="Effect.toggle('info','blind',{});; return false;" title="Toggle this sections visibility">Toggle this</a>

<!-- The element to be toggled: -->
<div id="info" class="someclass">
Your content here!
</div>
[/html]

To get that working, download the scriptaculous javascript library and extract it to somewhere like sitepath/javascripts/.
Prototype is included with Scriptaculous, so there's no need to download it on it's own.
If you want the element to be hidden by default, give it CSS properties of display: none;, but make sure they are applied using the style="display: none" method rather than a stylesheet entry and a class as this works off of the CSS attributes of an element.

The effect can be either blind, which appears to pull the element down (content doesn't move with it), appear (fades in and out) or slide (like blind, but the content moves with the element).

phpnut

Thanks, Nuvo! I was a little weary about ajax frameworks because I could never figure out how to use them, but since you showed me how to use it, I tried it out and it worked very nicely!

phpnut

I have one more question which is probably really obvious, but how can I have the div start out being hidden and then have the user click the link or button and have the content flow down?

Nuvo

If you don't want the box shown by default, you simply change it from:
[html]<div id="toggleme">Something</div>[/html]
To:
[html]<div id="toggleme" style="display: none;">Something</div>[/html]
Using display: none; will make the element invisible, meaning that when the toggle link is clicked, it will be shown rather than being visible and then hidden.
If you want the content to appear as though it's moving when the element is shown, simply change "blind" to "slide".