Javascript-форум - .click .addclass не повторяется!

хочу сделать блоки которые, при нажатии будут раскрываться, и при нажатии на закрывающий блок закрываться. но что то идет не так! блок открывается, закрывается, но повторно не открывается!

вот собственно код:

$(document).ready(function() {
    $(".inside").hide();
    $(".close").hide();


    $(".about").click(function() {  /*открываем*/
        $(this).addClass('active');
        $(".inside").show();
        $(".close").show();
        });

        $("div.close").click(function() { /*закрываем*/
            $(".inside").hide(200);
            $(".close").hide(200);
            $(".about").addClass('notactive').removeClass('active');
        });
    });

.removeclass почему то не работал поэтому снова добавил.
CSS:

* {
    margin: 0;
    padding: 0;
    font-family: impact;
}

body {
    background-color: #FFFF33;
    font-family: impact;
    margin: 0 auto;
}
.about{
    height: 200px;
    width: 300px;

    margin: 50px 50px auto;     
    background-color: rgb(255, 251, 247);
    border-radius: 10px;
	-webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    transform: rotate(-15deg);
    -webkit-transition: 0.3s ease-out 0s;
    -moz-transition: 0.3s ease-out 0s;
    -ms-transition: 0.3s ease-out 0s;
    -o-transition: 0.3s ease-out 0s;
    transition: 0.3s ease-out 0s;
}
.up{
    border-radius: 10px 10px 0 0;
    height: 25%;
    width: 100%;
    background-color: #FF0000;
}
.down{
    border-radius: 10px 10px 0 0;
    height: 75%;
    width: 100%;
    background-color: #fff5d1;

}
.inside{
    height: 95%;
    width: 95%;
    outline: 1px solid #ccc;
}
.about:hover{
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    transform: rotate(0);
    }
.active{
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    transform: rotate(0);
    height: 500px;
    width: 500px;

}
.notactive{
    height: 200px;
    width: 300px;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
.close{
    background-color: #333333;
    height: 25%;
    width: 25%;
    position: absolute;
    right: 1px;
}

HTML:

<!DOCTYPE html>
<html>
<meta charset="UTF-8" >

<head>
    <title>Trash</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" >
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="js/js.js" type="text/javascript"></script>
</head>
<body>
asdasdasdasasdasdasdasasdasdasdasasdasdasdasasdasdasdasasdasdasdasasdasdasdasasdasdasdas
    <div class="about">
        <div class="up">
        <div class="close"></div>
        </div>
        <div class="down">
            <div class="inside">aasdfasdfasdf </div>
        </div>
    </div>
    <div id="gallery">
    </div>
    <div id="staf">
    </div>
</body>
</html>

P.S: я нубик:) можете кричать:cray:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <style type="text/css"> * { margin: 0; padding: 0; font-family: impact; } body { background-color: #FFFF33; font-family: impact; margin: 0 auto; } .about{ height: 200px; width: 300px; margin: 50px 50px auto; background-color: rgb(255, 251, 247); border-radius: 10px; -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); transform: rotate(-15deg); -webkit-transition: 0.3s ease-out 0s; -moz-transition: 0.3s ease-out 0s; -ms-transition: 0.3s ease-out 0s; -o-transition: 0.3s ease-out 0s; transition: 0.3s ease-out 0s; } .up{ border-radius: 10px 10px 0 0; height: 25%; width: 100%; background-color: #FF0000; } .down{ border-radius: 10px 10px 0 0; height: 75%; width: 100%; background-color: #fff5d1; } .inside{ height: 95%; width: 95%; outline: 1px solid #ccc; } .about:hover{ -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); } .active{ -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); height: 500px; width: 500px; } .notactive{ height: 200px; width: 300px; -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); transform: rotate(-15deg); } .close{ background-color: #333333; height: 25%; width: 25%; position: absolute; right: 1px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(window).load(function(){ $(".inside").hide(); $(".close").hide(); $(".about").click(function() { /*открываем*/ $(this).addClass('active').removeClass('notactive'); $(".inside").show(); $(".close").show(); }); $("div.close").click(function(event) { /*закрываем*/ event.stopPropagation() $(".inside").hide(200); $(".close").hide(200); $(".about").addClass('notactive').removeClass('active'); }); }); </script> <title></title> </head> <body> asdasdasdasasdasdasdasasdasdasdasasdasdasdasasdasdasdasasdasdasdasasdasdasdasasdasdasdas <div class="about"> <div class="up"> <div class="close"></div> </div> <div class="down"> <div class="inside">aasdfasdfasdf </div> </div> </div> <div id="gallery"> </div> <div id="staf"> </div> </body> </html>