How to hide/show JS-generated content?

i need to hide/show javascript-generated content, see below:

$(window).load(function () {
    $("body").html('<a href="# id="ipsum">Show Ipsum</a><br />' +
        '<p id="lorem_content">Lorem</p><p id="ipsum_content">Ipsum</p>' +
        '<p id="dolor_content">dolor</p>');
    $("p").hide();
    $("p#lorem_content").show();

    $("a").live("click", function() {
        $("p").hide();
        $("p#" + $(this).attr('id') + "_content").show();
    });
});​

http://jsbin.com/olebu3/edit

The content, which should shows after clicking on a#ipsum is not being shown... why? The jQuery hide() method should just set to the content "display:none", not remove the content, isn't that t开发者_如何学Gorue?

---

Change <a href="# id="ipsum" to <a href="#" id="ipsum" in second line. You forgot a quote