I'm using JQuery to hide a map on the page and then insert a show/hide text link that, when clicked will reveal the <span> that contains the map. I want to toggle the text between show and hide depending on whether the map section is visible or not.

I've got the show/hide function working and the text is initially set to show when the map is hidden. Clicking on the text will show the map and change the text to hide.

I'm having problems changing the text back to 'show' if the user clicks on the hide map link.

The example is on this page:

here is the html of the section in question

Code HTML4Strict:
<p class="event-where">
    <span class="where">Where:</span> Sutherland Library<br> 
    30-36 Belmont Street, Sutherland NSW 2232 
    <span class="event-map">
	<iframe width="440" scrolling="no" height="300" src="http://maps.google.com/maps?..." ></iframe>
    </span><!-- event-map -->

Here is the JQuery code I've written so far.

Code JavaScript:
//hide the map by default
  //Add the button to toggle the map
  $('<span id="toggle-map">Show Map</span>').insertBefore('.event-map');
  //toggle the display by clicking on button
  $('#toggle-map').click(function () {
    if ($('#toggle-map').is(':visible')) {
      $(this).text('Hide Map');
    } else {
      $(this).text('Show Map');

I'm not sure why this doesn't work. Any suggestions as to how I can get the text to change back on the second click or an explanation of why this code doesn't work?