Друзья, как сделать чтоб при клике на блок нажималась так же и кнопка, которая находится в этом блоке?
Прилагаю пример. Есть блок, по клику на сам блок должен вылазить блок, а пока что работает если кликнуть на саму кнопку (три точки внизу).
var show_filter_list = function(obj) {
obj.classList.toggle("active");
console.log(obj.nextElementSibling)
panel = obj.nextElementSibling;
panel.classList.toggle("opened");
}
var show_advances = function(obj) {
obj.classList.toggle("active");
panel = obj.previousElementSibling;
panel.classList.toggle("opened");
}
.credit {
border: 1px solid #d8d8d8;
max-width: 922px;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
position: relative;
}
.credit-wrap {
padding: 30px 0 30px 0;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-around;
align-items: center;
}
.credit:hover {
box-shadow: 0 0 30px rgba(0, 0, 0, .3);
z-index: 2;
cursor: pointer;
transition: 0.3s;
}
.credit__title {
color: #2c7bdd;
font-weight: 700;
font-size: 18px;
margin-top: 0;
margin-bottom: 38px;
}
.credit__num {
font-size: 16px;
margin-bottom: 5px;
}
.credit__name {
color: #9c9898;
font-size: 12px;
}
.credit__more-btn {
border-radius: 6px;
background: #0e86d6;
color: #fff;
font-size: 16px;
text-align: center;
border: 0;
transition: all .2s;
text-decoration: none;
font-weight: 400;
padding: 10px 30px;
}
.credit__num--fw {
font-weight: bold;
}
.credit-time,
.credit-pcent {
margin-top: 40px;
}
.credit-advances {
margin-left: 40px;
padding-left: 60px;
padding-right: 30px;
border-top: 1px solid #d8d8d8;
margin-top: 20px;
padding-top: 20px;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
}
.credit-advances__list {
list-style: none;
margin: 0;
}
.credit__list-item {
margin-bottom: 8px;
font-size: 14px;
}
.credit-toggle {
position: absolute;
left: 50%;
background: #ddd;
bottom: 0;
width: 45px;
height: 12px;
margin-left: -22.5px;
border-radius: 10px 10px 0 0;
text-align: center;
line-height: 8px;
cursor: pointer;
transition: background .2s;
}
.credit:hover .credit-toggle {
background: #0e86d6;
}
.credit-toggle--circle {
position: relative;
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
transition: background .2s;
}
.credit-toggle--circle:before {
content: '';
position: absolute;
top: 0;
right: -10px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
transition: background .2s;
}
.credit-toggle--circle:after {
content: '';
position: absolute;
top: 0;
left: -10px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
transition: background .2s;
}
.credit-advances {
display: none;
}
.credit-advances.opened {
display: block;
}
<div class="credit">
<div class="credit-wrap">
<div class="credit__logo">
<img src="img/credit-logo.png" alt="" width="112px">
</div>
<div class="credit__sum">
<p class="credit__title">CreditStar</p>
<p class="credit__num">30 000 ₽</p>
<span class="credit__name">Сумма</span>
</div>
<div class="credit-time">
<p class="credit__num">15 минут</p>
<span class="credit__name">Время</span>
</div>
<div class="credit-pcent">
<p class="credit__num credit__num--fw">1.5% в день</p>
<span class="credit__name">Процент</span>
</div>
<a href="#" class="credit__more-btn">Подробнее</a>
</div>
<div class="credit-advances">
<ul class="credit-advances__list">
<li class="credit__list-item">Сумма займа от 1 000 до 30 000 рублей</li>
<li class="credit__list-item">Срок от 7 до 30 дней</li>
<li class="credit__list-item">Процентная ставка 1.5% в день</li>
<li class="credit__list-item">Выдача на банковкую карту</li>
<li class="credit__list-item">Нужен только паспорт</li>
<li class="credit__list-item">Гражданам РФ с 18 лет</li>
</ul>
</div>
<div class="credit-toggle" onclick="show_advances(this)">
<div class="credit-toggle--circle"></div>
</div>
</div>