Hidden sliding text

 $('.page__serviceitem__faq__item__toggle').on('click', function() { $(this).closest('.page__serviceitem__faq__item').find('.page__serviceitem__faq__item__descr').slideToggle(400).toggleClass('active'); $(this).closest('.page__serviceitem__faq__item').toggleClass('active'); }); 

 .page__serviceitem__faq__item { border: 1px solid #DFE8EF; } .page__serviceitem__faq__item__toggle { display: block; background-color: #FFF; padding: 21px 0 21px 114px; transition: all 250ms; color: #27323A; position: relative; cursor: pointer; } .page__serviceitem__faq__item__toggle.collapsed { background-color: #F2F6F9; } .page__serviceitem__faq__item__toggle__number { position: absolute; left: 29px; top: 0; color: #DFE8EF; font-size: 60px; font-weight: bold; line-height: 1; } .page__serviceitem__faq__item__toggle span { position: relative; display: inline-block; } .page__serviceitem__faq__item__toggle span::after { content: ""; display: block; border-top: 1px dashed #27323A; position: absolute; width: 100%; } .page__serviceitem__faq__item__descr { background-color: #FFF; padding: 0 50px 22px 114px; display: none; } .in .page__serviceitem__faq__item__descr { display: block; } .page__serviceitem__faq__item .collapse { background-color: #FFF; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="seo-accordion" role="tablist" aria-multiselectable="false" class="page__serviceitem__faq"> <div class="page__serviceitem__faq__item in"> <a class="page__serviceitem__faq__item__toggle"> <div class="page__serviceitem__faq__item__toggle__number">01</div> <span id="heading1">Оптимизация сайта</span> </a> <div id="collapse1" class="collapse"> <div class="page__serviceitem__faq__item__descr"> 1.1. Внедрение систем аналитики, их настройка под цели клиента (Google Analytics, Яндекс Метрика, цели, электронная торговля, отслеживание посещаемости и структуры трафика). <p></p> <p> 1.2. Проверка сайта на пессимизацию поисковыми системами и устранение потенциальной угрозы санкций.</p> <p> 1.3. Техническая оптимизация сайта (скорость и корректность работы, индексация сайта и его представление в поиске).</p> <p> 1.4. Работа с сервисами для вебмастеров с целью улучшения представления сайта в поиске (Яндекс. Вебмастер, Google Webmaster, Вебмастер mail.ru).</p> <p> 1.5. Внутренняя оптимизация (Подготовка и размещение текстов на сайте, прописание заголовков h1-h3, тегов, внутренняя перелинковка).</p> <p> 1.6. Анализ коммерческих факторов (необходимые в данной тематике коммерческая информация — цены, условия работы, выгоды и дополнительная ценность сайта).</p> <p> 1.7. Анализ социальных сигналов (наличие и активность аккаунтов в социальных сетях).</p> <p> 1.8. Анализ поведенческих факторов (сниппеты сайта по запросам, кликабельность в выдаче, поведенческие метрики на сайте). </p> </div> <p></p> </div> <p></p> </div> <div class="page__serviceitem__faq__item"> <a class="page__serviceitem__faq__item__toggle"> <div class="page__serviceitem__faq__item__toggle__number">02</div> <span id="heading1">Внешняя оптимизация</span> </a> <div id="collapse2" class="collapse"> <div class="page__serviceitem__faq__item__descr"> 2.1. Создание проекта в бирже ссылок.<br> 2.2. Внесение продвигаемых страниц.<br> 2.3. Составление анкоров.<br> 2.4. Закупка ссылок в бирже ссылок.<br> 2.4.1 Подбор сайтов-доноров.<br> 2.4.2 Проверка индексации в поисковых системах.<br> 2.4.3 Проверка количества внешних ссылок.<br> 2.4.4 Проверка количества внутренних ссылок.<br> 2.4.5 Проверка текстового наполнения сайта.<br> 2.4.6 Проверка посещаемости.</div> <p></p> </div> <p></p> </div> <div class="page__serviceitem__faq__item"> <a class="page__serviceitem__faq__item__toggle"> <div class="page__serviceitem__faq__item__toggle__number">03</div> <span id="heading1">Анализ конкурентов</span> </a> </p> <div id="collapse3" class="collapse"> <div class="page__serviceitem__faq__item__descr"> 3.1. Подбор 4-5 основных конкурентов сайта в интернете.<br> 3.2. Анализ конкурентов с целью поиска сильных мест конкурентов.<br> 3.3. Подготовка технического задания на доработку сайта по результатам анализа конкурентов.</div> <p></p> </div> <p></p> </div> <div class="page__serviceitem__faq__item"> <a class="page__serviceitem__faq__item__toggle"> <div class="page__serviceitem__faq__item__toggle__number">04</div> <span id="heading1">Юзабилити аудит</span> </a> <div id="collapse4" class="collapse"> <div class="page__serviceitem__faq__item__descr"> 4.1. Анализ основных страниц сайта.<br> 4.2. Анализ конверсионных путей.<br> 4.3. Анализ действия посетителей в корзине.<br> 4.4. Анализ карт поведения посетителей, видеозаписей их активности на сайте.<br> 4.5. Тестирование нововведений при необходимости.<br> 4.6. Подготовка технического задания по результатам юзабилити аудита и контроль внедрения.</div> <p></p> </div> <p></p> </div> <div class="page__serviceitem__faq__item"> <a class="page__serviceitem__faq__item__toggle"> <div class="page__serviceitem__faq__item__toggle__number">05</div> <span id="heading1">Мониторинг</span> </a> <div id="collapse5" class="collapse"> <div class="page__serviceitem__faq__item__descr">Мониторинг позиций сайта в поисковых системах, посещаемости, конверсий.<br> Фиксация основных параметров сайта и их отслеживание.</div> <p></p> </div> <p></p> </div> <div class="page__serviceitem__faq__item"> <a class="page__serviceitem__faq__item__toggle"> <div class="page__serviceitem__faq__item__toggle__number">06</div> <span id="heading1">Отчеты</span> </a> <div id="collapse6" class="collapse"> <div class="page__serviceitem__faq__item__descr"> <p>Ежемесячное составление отчетов.</p> </div> <p></p> </div> <p></p> </div> <p></p> </div>