Скрытый выдвижной текст

309
22 июля 2017, 05:15

http://intellect-media.biz/seo-prodvizhenie/ - мой

https://atom-media.ru/seo/ - донор

Не получается реализовать такую же выдвижную таблицу.

Надо так же, а у меня почему-то поплыло. Какие надо правки?

Вот 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>
Answer 1

Я бы сделал вот так:

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

READ ALSO
Запрет смены картинок по нажатию кнопок lightbox2

Запрет смены картинок по нажатию кнопок lightbox2

Использую lightbox2 галерею и столкнулся с такой проблемой: если кликнуть на картинку и потом нажать на клавиатуре стрелку вперёд или назад, то галерея...

229
Переадресовывающиеся ссылки в iframe

Переадресовывающиеся ссылки в iframe

Есть ссылочка https://warriorpluscom/o2/a/w3dns/0 которая перенаправляет на другой сайт, ну типа bitly

355
301 редирект через .htaccess

301 редирект через .htaccess

ЗдравствуйтеВ настоящий момент при попытке открыть https://сайт

298