http://intellect-media.biz/seo-prodvizhenie/ - my

https://atom-media.ru/seo/ - donor

Can not implement the same pull-out table.

enter image description here

It should be the same, but for some reason I swam. What is necessary to edit?

Here is the html:

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

    1 answer 1

    I would do this:

     $('.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> 

    • Swam even more ... - Ilya Burmaka
    • @IlyaBurmaka and what exactly did you float? - Cheg
    • Please go to intellect-media.biz/seo-prodvizhenie ? down there you can see - Ilya Burmaka
    • @IlyaBurmaka updated the answer - Cheg
    • Now I will try - Ilya Burmaka