JQuery function does not work after changing ID

Question

I have a simple file that has a Jquery script it in that looks like this:

<script type="text\javascript">     
$('.grey_title').click(function(){
        $(this).parent().find('.inner_div').slideToggle('slow');
    });
    $('#hideall').click(function(){
        $('.inner_div').slideUp('slow');
        $(this).parent().html("<span id=\"showall\">Show all Menus</span>");
    });
    $('#showall').click(function(){
        $('.inner_div').slideDown('slow');
        $(this).parent().html("<span id=\"hideall\">Hide all Menus</span>");
    });
   });
</script>
  <div><span id="hideall">Hide all Menus</span></div>

The function works fine while hiding menus and when you change the ID to showall in the HTML and the script to slideToggle, however when you click Hide all it will close all and according to Firefox, changes the item to be

<span id="showall">...</span>

but, when clicked again it does nothing. What could I be doing wrong?

the page

Answer 1

I expect the binding to fail since there is no showall when the binding is done

A better choice is to toggle

You may want to switch the functions around to match what is shown when the page loads

DEMO HERE

$('#hideall').toggle(
  function(){
    $('.inner_div').slideUp('slow');
    $(this).text("Show all Menus");
  },
  function(){
    $('.inner_div').slideDown('slow');
    $(this).text("Hide all Menus");
  }
);