@Pref_viper

Аккордеон, как сделать, чтобы переходя на другую кнопку, предыдущая закрывалась?

Здравствуйте!
Сделал аккордеон, но возник вопрос, как сделать, чтобы переходя на другую кнопку, предыдущая закрывалась ?

<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();
  • Вопрос задан
  • 127 просмотров
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы