By
IsayR
Всем привет! Подскажите, пожалуйста, как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри? У меня в принципе все работает, блок открывается и закрывается, НО если я нажимаю на блок, а не на стрелочку, она у меня остается в таком же положении(а она должна у меня меняться, когда блок открывается), и получается куча мала, и выглядит это не очень презентабельно. Подскажите, пожалуйста!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-div">
<div class="div">
<div class="window-one">
<h3 class="title">
Заголовок 1
</h3>
<div class="arrow-test"></div>
</div>
<div class="window-two">
<div class="text">Текст 1</div>
</div>
</div>
</div>
<div class="wrapper-div">
<div class="div">
<div class="window-one">
<h3 class="title">
Заголовок 2
</h3>
<div class="arrow-test"></div>
</div>
<div class="window-two">
<div class="text">Текст 2</div>
</div>
</div>
</div>
<div class="wrapper-div">
<div class="div">
<div class="window-one">
<h3 class="title">
Заголовок 3
</h3>
<div class="arrow-test"></div>
</div>
<div class="window-two">
<div class="text">Текст 3</div>
</div>
</div>
</div>
.div{
border: 1px solid #3A444E;
border-radius: 10px;
width: 300px;
height: 64px;
overflow: hidden;
}
.div.open {
height: auto;
background: #000;
color: #fff;
}
.window-one {
display: flex;
align-items: center;
justify-content: space-between;
}
.title {
margin-bottom: 20px;
}
.arrow-test {
content: '';
background: url('http://cdn.onlinewebfonts.com/svg/img_387044.png') no-repeat center center / 100%;
width: 30px;
height: 30px;
cursor: pointer;
}
.arrow-test.open {
content: '';
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Eo_circle_yellow_arrow-up.svg/1024px-Eo_circle_yellow_arrow-up.svg.png') no-repeat center center / 100%;
width: 30px;
height: 30px;
cursor: pointer;
}
$('.div, .arrow-test').click( function(){ $(this).toggleClass('open')});