Toggle divs for open/close with Derek Perez PageSlide

Question

Hi,

I'm trying to use Derek Perez PageSlide Plugin for jQuery in a Wordpress site. Default beahaviour is a link to open it, and click anywhere else on the page to close it.

I would like to toggle images saying "open" when it's closed and "close" when it's open. So I have played around with jquery toggle() and enclosing the links in divs but can't get it to work. I can get 2 simple divs to toggle, but not with link content.

open link:
<a href="_right.html" id="slide-right">

close link:
<a href="javascript:;" class="pageslide-close">

Below enclosed in divs with images to clarify:
<div id="opendiv">
<a href="_right.html" id="slide-right"><img src="open.png"></a>
</div>

<div id="closediv">
<a href="javascript:;" class="pageslide-close"><img src="close.png"></a>
</div>

Any ideas? Thank's /Bo

Edit:
Seems like the below script part, that has to be located at the very bottom of the page, interrupts the execution of the jquery toggle() function. Ideas?

<script type="text/javascript">
$("#slide-left").pageSlide({ width: "350px", direction: "left" });
$("#slide-right").pageSlide({ width: "350px", direction: "right" });
$("#slide-modal").pageSlide({ width: "350px", direction: "left", modal: true });
</script>

Answer 1

So I put the toggle() funtion in head instead of in page and problem was solved!

$(document).ready(function(){
$("a").click(function() {
$("div.mis").toggle();
});
});
</script>