Доброе время суток всем!
Ребята подскажите, пожалуйста, как сделать плавный, выпадающий аккордеон???
Я уже написал скрипт, но плавности не видно((
По умолчанию первая li-шка всегда должна быть активной...
<ul>
<li class="accordion_open">
<div>
<p>Что такое "подготовка проекта"?</p>
<div class="block_answers">
<p class="answer">Для эффективной работы нам необходимо согласовать все этапы будущего проекта с заказчиком.
Специалисты нашей компании изучают ваше предложение и выявляют потребности ваших потенциальных клиентов.
После чего разрабатываем речевые модули, обучаем телемаркетологов и подготавливаем актуальные базы данных для обзвона.</p>
</div>
</div>
</li>
<li >
<div>
<p>Что такое "подготовка проекта"?</p>
<div class="block_answers">
<p class="answer">Для эффективной работы нам необходимо согласовать все этапы будущего проекта с заказчиком.
Специалисты нашей компании изучают ваше предложение и выявляют потребности ваших потенциальных клиентов.
После чего разрабатываем речевые модули, обучаем телемаркетологов и подготавливаем актуальные базы данных для обзвона.</p>
</div>
</div>
</li>
</ul>
.wrap_answer_to_question li.accordion_open {
height: auto;
overflow: visible;
}
.wrap_answer_to_question li {
display: flex;
list-style-type: none;
margin-bottom: 20px;
height: 30px;
overflow: hidden;
cursor: pointer;
}
.wrap_answer_to_question li:before {
content: url(../images/question.png);
margin-left: 40px;
}
.wrap_answer_to_question li p {
font-family: 'HelveticaNeueCyr-Thin', sans-serif;
font-weight: normal;
font-size: 25px;
color: #000;
margin: 0 0 0 15px;
padding-bottom: 15px;
}
.wrap_answer_to_question .block_answers {
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 .answer {
margin: 0;
line-height: 45px;
font-family: 'HelveticaNeueCyr-Thin', sans-serif;
font-weight: normal;
font-size: 20px;
padding: 0;
}
<script>
$(document).ready(function(){
$('.wrap_answer_to_question li').click(function(){
if($(this).hasClass('accordion_open')) {
$(this).removeClass('accordion_open');
//$(this).fadeIn();
}
else {
$('.wrap_answer_to_question li').removeClass('accordion_open');
$(this).addClass('accordion_open');
// $(this).fadeOut();
}
});
});
</script>
Простой
