Exibir/Esconder elementos

Código:

<script type="text/javascript">
    $(function(){
        $("#for-block1")
            .click(function(){
                $("#block1").hide();
            });
 
        $("#for-block2")
            .click(function(){
                $("#block2").show();
            });
 
        $("#for-block3")
            .click(function(){
                $("#block3").toggle();
            });
 
        $("#fadeout-block1")
            .click(function(){
                $("#block1")
                    .show()
                    .hide("slow");
            });
 
        $("#fadein-block2")
            .click(function(){
                $("#block2")
                    .hide()
                    .show("slow");
            });
    });
</script>

<style type="text/css">
    #block1, #block2, #block3 {
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
    }
 
    #block1 {
        background: green;
    }
 
    #block2 {
        background: yellow;
        display: none;
    }
 
    #block3 {
        background: blue;
    }
 
    #container {
        height: 75px;
    }
</style>

<div id="container">
    <div id="block1">Bloco 1</div>
    <div id="block2">Bloco 2</div>
    <div id="block3">Bloco 3</div>
</div>
<p>
    <button id="for-block1">Esconder bloco 1</button>
    <button id="for-block2">Exibir bloco 2</button>
    <button id="for-block3">Alternar bloco 3</button>
    <button id="fadeout-block1">Esconder bloco 1 (animação)</button>
    <button id="fadein-block2">Exibir bloco 2 (animação)</button>
</p>

Resultado:

Esconder bloco 1 Exibir bloco 2 Alternar bloco 3 Esconder bloco 1 (animação) Exibir bloco 2 (animação)