jQuery Hide / Show (div with modified id attr)

I'm having truoble doing this:

<div id="show-menu">Show Menu</div>

    <script type="text/javascript"> 
        $(document).ready(function() {
            $('#show-menu').click(function() {
                $(this).animate({marginRight:'70px'}, 500);
                $('#menu').animate({width:'300px'}, 500);
                $('.menu-menu-principal-container, #header h1').animate({marginRight:'70px'}, 500);
                $(".menu-menu-principal-container, #header h1").show("slow");
                $("#show-menu").hide("slow");
                $("#hide-menu").show("slow");
                $(this).text('Hide Menu');
                $(this).attr('id', 'hide-menu');            
            });
            $('#hide-menu').click(function() {
                $(this).animate({marginRight:'-70px'}, 500);
                $('#menu').animate({width:'100px'}, 500);
                $('.menu-menu-principal-container, #header h1').animate({marginRight:'-70px'}, 500);
                $(".menu-menu-principal-container, #header h1").hide("slow");
                $(this).text('Show Menu');
                $(this).attr('id', 'show-menu');
            });
        开发者_如何转开发})

    </script>

If I click on Show Menu (#show-menu) it shows correctly, but when I click again in the Hide Menu (#hide-menu) it wont hide? It does nothing.

---

You need to use jQuery delegate() or live()

Preferably I would use delegate like this

$('body').delegate('#show-menu', 'click', function() { ... your code ... });
$('body').delegate('#hide-menu', 'click', function() { ... your code ... });

Remember you can delegate from a different position in the DOM instead of $('body').delegate(); you could use $('#myparentContainer').delegate();

The alternative would be to use live events like this

$('#show-menu').live('click', function() { ... your code ...});
$('#hide-menu').live('click', function() { ... your code ...});

---

hide-menu does not exist during the document ready function call, and hence will not be bounded.
you would need to use live to have the event bounded as it appears.

---

What .click() does is to bind a function to the click event to the selector. Since you're doing $('#hide-menu').click(function() before a #hide-menu html element exist, it won't work, you should place the $('#hide-menu').click(function() { after $(this).attr('id', 'hide-menu');

$(document).ready(function() {
            $('#show-menu').click(function() {
                $(this).animate({marginRight:'70px'}, 500);
                $('#menu').animate({width:'300px'}, 500);
                $('.menu-menu-principal-container, #header h1').animate({marginRight:'70px'}, 500);
                $(".menu-menu-principal-container, #header h1").show("slow");
                $("#show-menu").hide("slow");
                $("#hide-menu").show("slow");
                $(this).text('Hide Menu');
                $(this).attr('id', 'hide-menu');  
$('#hide-menu').click(function() {
                $(this).animate({marginRight:'-70px'}, 500);
                $('#menu').animate({width:'100px'}, 500);
                $('.menu-menu-principal-container, #header h1').animate({marginRight:'-70px'}, 500);
                $(".menu-menu-principal-container, #header h1").hide("slow");
                $(this).text('Show Menu');
                $(this).attr('id', 'show-menu');
            });          
            });

        })

you can also use live() since it "binds now or in the future" but that's less efficient, since you "know" when the #hide-menu attribute appear in the DOM, you should bind the event there