Здравствуйте!
Сделал аккордеон, но возник вопрос, как сделать, чтобы переходя на другую кнопку, предыдущая закрывалась ?
<ul class="accordion" data-accordion="open">
<li>
<p class="accordion_header">Что такое "подготовка проекта"?</p>
<div class="block_answers accordion_open" style="display: block">
<p class="answer">Для эффективной работы нам необходимо согласовать все этапы будущего проекта с заказчиком.
Специалисты нашей компании изучают ваше предложение и выявляют потребности ваших потенциальных клиентов.
После чего разрабатываем речевые модули, обучаем телемаркетологов и подготавливаем актуальные базы данных для обзвона.</p>
</div>
</li>
<li>
<p class="accordion_header">Кто может порекомендовать ваши услуги?</p>
<div class="block_answers">
<p class="answer">Для эффективной работы нам необходимо согласовать все этапы будущего проекта с заказчиком.
Специалисты нашей компании изучают ваше предложение и выявляют потребности ваших потенциальных клиентов.
После чего разрабатываем речевые модули, обучаем телемаркетологов и подготавливаем актуальные базы данных для обзвона.</p>
</div>
</li>
<li>
<p class="accordion_header">Сколько у Вас операторов?</p>
<div class="block_answers">
<p class="answer">Для эффективной работы нам необходимо согласовать все этапы будущего проекта с заказчиком.
Специалисты нашей компании изучают ваше предложение и выявляют потребности ваших потенциальных клиентов.
После чего разрабатываем речевые модули, обучаем телемаркетологов и подготавливаем актуальные базы данных для обзвона.</p>
</div>
</li>
</ul>
.accordion li .accordion_header:before {
content: url("../images/question.png");
margin-right: 40px;
display: inline-block;
vertical-align: middle;
}
.accordion .accordion_header {
width: 100%;
font-family: 'HelveticaNeueCyr-Thin', sans-serif;
font-weight: normal;
font-size: 20px;
color: #000;
margin: 0 0 0 15px;
padding-bottom: 15px;
display: inline-block;
vertical-align: middle;
}
.accordion .answer {
margin: 0;
line-height: 45px;
font-family: 'HelveticaNeueCyr-Thin', sans-serif;
font-weight: normal;
font-size: 20px;
padding: 0;
}
.accordion .block_answers {
display: none;
padding: 35px 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #0467bb;
}
.wrap_answer_to_question li {
list-style-type: none;
margin-bottom: 20px;
cursor: pointer;
}
var accordion = function () {
var data = $('.accordion').attr('data-accordion');
$('.accordion_header').click(function () {
if (data === 'close'){
$('.block_answers').slideUp();
if ($(this).hasClass('accordion_open')){
$(this).toggleClass('accordion_open');
}
else {
$('.accordion_header').removeClass('accordion_open');
$(this).toggleClass('accordion_open');
}
}
else {
$(this).toggleClass('accordion_open');
}
$(this).next('.block_answers').not(':animated').slideToggle();
})
}
accordion();