Добрый день всем!) Нужна помощь с аккордеоном. Необходимо, чтоб при сворачивании остальных вкладок, кроме открытой у них возвращалось исходное состояние псевдоэлемента "after" (галочка). Прилагаю код, ибо сам не могу понять как это реализовать
Ссылка на
лайв-версию. (Аккордеон в самом конце).
<div class="col-lg-6">
<div class="accordition_menu">
<h2 class="accordition_heading accordition_heading_1">
Photography
</h2>
<div class="accordition_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<h2 class="accordition_heading accordition_heading_2">
Creativity
</h2>
<div class="accordition_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<h2 class="accordition_heading accordition_heading_3">
Web design
</h2>
<div class="accordition_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
$(document).ready(function(){
$('.accordition_menu').find('h2').click(
function(){$(this).next().stop().slideToggle(500)}).next().stop().hide()}
);
$('.accordition_menu h2').click(
function(){$(this).parent().find('div').hide(500), $(this).find('div').slideDown()}
);
CSS:
Код:
|
.accordition_menu {
margin-left: 30px;
}
.accordition_heading {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
padding: 15px 10px 15px 25px;
border: 1px solid #e5e5e5;
cursor: pointer;
font-size: 14px;
margin-bottom: 16px;
}
.accordition_heading_1::before, .accordition_heading_2::before, .accordition_heading_3::before {
content: "";
position: relative;
height: 48px;
width: 32px;
right: 10px;
float: left;
bottom: 16px;
}
.accordition_heading_1::before {
background: url(../img/picture_icon.png) no-repeat center;
}
.accordition_heading_2::before {
background: url(../img/equalizer.png) no-repeat center;
}
.accordition_heading_3::before {
background: url(../img/bullseye.png) no-repeat center;
}
.accordition_heading::after {
content: "";
position: relative;
background: url(../img/arrow_down.png) no-repeat center;
height: 48px;
width: 22px;
bottom: 16px;
float: right;
transition: 0.3s;
}
.accordition_heading.in:after {
transform: rotate(180deg);
}
.accordition_content {
font-family: 'Roboto', sans-serif;
font-style: italic;
padding: 11.5px 15px 11.5px 15px;
width: 510px;
border: 1px solid #e5e5e5;
margin-bottom: 16px;
} |