Показать сообщение отдельно
  #1 (permalink)  
Старый 28.07.2018, 16:56
Новичок на форуме
Отправить личное сообщение для Александр Рэйму Посмотреть профиль Найти все сообщения от Александр Рэйму
 
Регистрация: 28.07.2018
Сообщений: 2

Нужна помощь с аккордеоном. Сворачивание вкладок при открытии другой, смена стрелки.
Добрый день всем!) Нужна помощь с аккордеоном. Необходимо, чтоб при сворачивании остальных вкладок, кроме открытой у них возвращалось исходное состояние псевдоэлемента "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;
}
Ответить с цитированием