раскрывающийся при клике <section>

by Denis Tverdokhlebov

HTML

<ul class="service-list">
    <h3>Актуальные вакансии</h3>
    <li class="service-item">
      <a href="#" class="service-show">Юрист</a>
      <section>
       <h6>Юрист (регистрация юридических лиц и индивидуальных предпринимателей)</h6>
        <p class="fw400">Обязанности:</p>
        <ul>
          <li>Консультирование клиентов по услугам компании (регистрация юридических лиц, внесение изменений);</li>
          <li>Подготовка документов для проведения регистрационных действий (регистрация ООО, регистрация ИП, изменения).</li>
          <li>Взаимодействие с помощниками юристов, контроль их работы.</li>
          <li>Сопровождение выполнения заказа на всех этапах.</li>
        </ul>
        <p class="fw400">Требования:</p>
        <ul>
          <li>Высшее образование;</li>
          <li>Обязательно наличие практического опыта по регистрации юридических лиц и внесению изменений;</li>
          <li>Навыки общения с людьми, приветливость и доброжелательность;</li>
          <li>Настойчивость в достижении цели и настроенность на получение результата;</li>
          <li>Умение работать с большими объемами информации;</li>
          <li>Желание работать и зарабатывать;</li>
        </ul>
        <p class="fw400">Условия</p>
        <ul>
          <li>Конкурентный оклад + ежемесячная премия от объема выполненной работы.</li>
          <li>Полный рабочий день, с 9 до 18;</li>
          <li>Работа в современном офисе (м. Сходненская, напротив 46 ИФНС);</li>
          <li>Оформление в полном соответствии с ТК РФ, зарплата "белая";</li>
          <li>Испытательный срок - 3 мес. (без уменьшения зарплаты).</li>
        </ul>
        <a href="" class="d-btn show-order-form cboxElement">Откликнуться на вакансию</a>
      </section>
    </li>
     <li class="service-item">
      <a href="#" class="service-show">Специалист по маркетингу и рекламе</a>
      <section>
       <h6>Юрист (регистрация юридических лиц и индивидуальных предпринимателей)</h6>
        <p...

CSS

.an_back{
  color: black;
  background: red;
}

JavaScript

$(function() {
      var caption = $(".service-list").find(".service-show"),
        content = $(".service-item").find("section").hide();

      caption.click(function(e) {
        e.preventDefault();
        var activeContent = content.filter('.active');
        activeContent.removeClass('active').slideUp(600);
        caption.removeClass('an_back');
        if ($(this).next(content).is(activeContent)) return;
        $(this).next(content).addClass('active').slideDown(600);
        $(this).addClass('an_back');
      });
    });