show/hide ajax? javascript toggle

Question

Hi

I'm looking for a wordpress plugin that hides to start with the when I click say an arrow image an ajax feature pops out with say a contact form inside and also another show hide feature at the bottom of the page to show and hide multiple divs.

Is there a plugin that can do all this?

My pages have to be editable for my client so it is impossible for me to build this into the theme. The javascript function needs to be part of a page. I've found WP ShowHide Elements but this does not allow me to do it with multiple divs in the same placement.

Here's some of the script I'm using as allowed by the plugin in my pages

    <p id="mytest">my text</p>
<p><a onclick="wp_showhide('mytest')" href="javascript:void(0);">my link</a></p>
<p id="new">new</p>
<p><a onclick="wp_showhide('new')" href="javascript:void(0);">new</a></p>

Thanks for your help Regards

Judi

P.S. http://wordpress.digitalnature.ro/mystique/ Please notice the sidebar on this website, this is what I'm trying to achive but within the main page content

This short script works within a page but I want a swap div effect How can I use this to work with multipe divs? - i'd like to change the visability of multiple divs all with the same space or div

   <p><script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script></p>
<p><a onclick="toggle_visibility('foo');" href="#">Click here to toggle visibility of element #foo</a></p>
<div id="foo">This is foo</div>
<p><a onclick="toggle_visibility('too');" href="#">Click here to toggle visibility of element #too</a></p>
<div id="too">This is too</div>

I think I may have solved my own problem :) Would love to know whether anyone can modify it so the 1st div is already open when the page loads

<p><script type="text/javascript">
lastone='empty'; 
function showIt(lyr) 
{ 
if (lastone!='empty') lastone.style.display='none'; 
lastone=document.getElementById(lyr); 
lastone.style.display='block';
}
</script></p>
<p><a href="JavaScript:;" onClick="showIt('divID')">link</a></p>
<div id="divID" style="display: none;">content</div>
<p><a href="JavaScript:;" onClick="showIt('new')">link</a></p>
<div id="new" style="display: none;">content</div>

Answer 1

To answer your edit: can't you just remove the display:none style from the original div?

If you need to do it in Javascript, chuck a showIt('divID'); line in after your function.

To do it properly, add it into window.onload:

window.onload = showIt('divID');

Or more properly, have a function that enqueues into the onload (like this).

Or probably best, use a framework :)