Ajax Load and Unload (toggle display)

[drooh]

I am looking for a way to use ajax to load external information (including and image and other data) into a table or div and then be able to unload it or toggle it off.

basically something like this

<div onclick load in external info, toggle on/off>Listing Info - Address - Price</div>
<div info loaded in here, able to toggle on and off></div>

I am able to use ajax to load in external data and I am alsop able to use a toggle js script but I am having difficulty combining the two and was wanting to know if there was an easier way to do this?

[httpwebwitch]

once you've loaded the content via AJAX, it's in your DOM and you can hide it by setting its style to "display:none".

My favourite way to do this is to define a CSS class called ".invisible", and use the Mootools library, which has functions addClass() and removeClass(), as well as a toggleClass(). All you need is a link or button with an onclick event:

<a href="" onclick="$('yourstuff').toggleClass('invisible');return false;" >show/hide</a>

to unload the stuff from your DOM, remove the element or set its parent's innerHTML to ""