CSS Frage - Class öffnen.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(function(){
        $( "#button" ).click(function() {
          $( ".ClassRed" ).fadeIn("slow", function(){
           $( "#buttonOut" ).click(function() {
               $( ".ClassRed" ).fadeOut("slow");
           });
          });
        });
    });
</script>
<style>
    #button
    {
        width: 120px;
        height: 30px; 
        background: white;
        line-height: 30px;
        font-family: Arial;
        font-size: 11px;
        text-align: center;
        border: 1px solid rgba(0,0,0,0.2);
        cursor: pointer;
    }
    .classRed
    {
        width: 150px;
        height: 150px;
        background: red;
        display: none;
        margin-top: 5px;
    }
    #buttonOut
    {
        width: 120px;
        height: 30px; 
        background: white;
        line-height: 30px;
        font-family: Arial;
        font-size: 11px;
        text-align: center;
        border: 1px solid rgba(0,0,0,0.2);
        cursor: pointer;
        margin-top: 5px;
    }
</style>


<div id="button">ClassRed einblenden</div>
<div id="buttonOut">ClassRed ausblenden</div>
<div class="classRed"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(function(){
        $("#button").click(function(){
            if($("#button").html() == "Einblenden"){
                $(".ClassRed").fadeIn("slow", function(){
                    $("#button").text("Ausblenden");
                });   
            }else{
                $(".ClassRed").fadeOut("slow", function(){
                    $("#button").text("Einblenden");   
                });    
            }     
        });          
    });
</script>
<style>
    #button
    {
        width: 120px;
        height: 30px; 
        background: white;
        line-height: 30px;
        font-family: Arial;
        font-size: 11px;
        text-align: center;
        border: 1px solid rgba(0,0,0,0.2);
        cursor: pointer;
    }
    .classRed
    {
        width: 150px;
        height: 150px;
        background: red;
        display: none;
        margin-top: 5px;
    }
</style>


<div id="button">Einblenden</div>
<div class="classRed"></div>