Форум

CRIP · #1 (**permalink**) 22.03.2014, 12:14

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

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

$(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: я нубик

можете кричать

рони · #2 (**permalink**) 22.03.2014, 12:42

CRIP,
так?

<!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>

CRIP · #3 (**permalink**) 22.03.2014, 13:23

дааааааааааа

CRIP · #4 (**permalink**) 22.03.2014, 13:24

даа именно!

CRIP · #5 (**permalink**) 22.03.2014, 13:28

рони,
Спасибо, и на этом! дальше сам разберусь

Форум

Справочник

Discord чат

Курсы javascript