ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Свернуть и развернуть блок по клику на jQuery

Свернуть и развернуть блок по клику на jQuery

Свернуть и развернуть блок по клику на jQuery
В статье описано, как создать кнопку "Читать дальше", чтобы развернуть и свернуть любой раздел, где по клику мы может полностью развернуть текст. По сути, когда у нас много текстов в разделе и мы хотим разместить его на веб-странице, мы используем расширение «Читать дальше». Кнопка «Читать дальше» помогает скрыть перекрывающиеся тексты или элементы, а при щелчке она раскрывается и показывает все содержимое. Тем самым появляется возможность для большего объема, и также создать информационный блок, что занимает не так много места.

По умолчанию или при открытии страницы данная категория имеет значение высоты и скрывает все переполненные тексты, а когда вы нажмете на кнопку, то автоматически показывается скрытый текст, что изначально его не видим. Когда весь раздел развернется, текст для чтения будет заменен, где при повторном при щелчке по разделу, мы снова свернем или уменьшим, как изначально было. Также есть кнопка со стрелкой, которая меняется вверх и вниз в зависимости от положение по фиксации.

Установка:

HEAD

Код
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

HTML

Код
<div class="container">
  <div id="content">

  <div class="post type-post status-publish format-standard hentry category-uncategorized entry">
  <h2 class="entry-title"><a href="#">ZorNet.Ru — сайт для вебмастера</a></h2>  
  <div class="entry-content">
  <p>В консоли поиска Google перейдите в Сканирование. Взгляните на графики, вы сможете определить резкие изменения. </p>
  </div>
  </div>

  <div class="post type-post status-publish format-standard hentry category-uncategorized entry">
  <h2 class="entry-title"><a href="#">Снижение посещаемости веб-сайта</a></h2>  
  <div class="entry-content">
  <p>Google не раскрывает точных сведений о своих алгоритмах, а также не раскрывает конкретных подробностей о каких-либо серьезных изменениях и развертываниях, которые он вносит. </p>
  </div>
  </div>
   
  <div class="post type-post status-publish format-standard hentry category-uncategorized entry">
  <h2 class="entry-title"><a href="#">Обновление алгоритма поисковой системы</a></h2>  
  <div class="entry-content">
  <p>Google, крупнейшая поисковая система, выпускает несколько обновлений своего алгоритма в течение года, как и другие поисковые системы. Когда происходит крупное обновление, оно может сильно ударить по веб-сайтам.</p>
  </div>
  </div>

  </div>
</div>

CSS

Код
p {
  margin: 0 0 1.5em;
}
.container {
  max-width: 400px;
  margin: 0 auto;
}

.entry {
  position: relative;
  overflow: hidden;
  margin: 30px 0;
  padding: 20px 20px 4em 20px;
  background: #FFF;
  font-family: "Open Sans", sans-serif;
  box-shadow: 0 0 15px #999;
}

.entry-title,
.entry-title a {
  margin-top: 0;
  font-family: Oswald, sans-serif;
  color: #333;
  text-decoration: none;
}

.entry-title a:hover {
  color: #ff0047;
}

.more-link {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  padding: 8px;
  background: #ff0047;
  color: #FFF;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 0 10px #000;
}

.more-link:hover {
  background: #e60023;
}

.more-link:after {
  content: "\2193";
  margin-left: 8px;
  font-size: .8em;
}

.more-link.open:after {
  content: "\2191";
}

JS

Код
$(document).ready(function() {
  var closeHeight = '10em';  
  var moreText = 'Read More';  
  var lessText = 'Read Less';
  var duration = '1000';
  var easing = 'linear';  

  $('.page-template-page_blog-php #content .entry, .container #content .entry').each(function() {
   
  var current = $(this).children('.entry-content');
  current.data('fullHeight', current.height()).css('height', closeHeight);

  current.after('<a href="javascript:void(0);" class="more-link closed">' + moreText + '</a>');

  });
   
  var openSlider = function() {
  link = $(this);
  var openHeight = link.prev('.entry-content').data('fullHeight') + 'px';
  link.prev('.entry-content').animate({'height': openHeight}, {duration: duration }, easing);
  link.text(lessText).addClass('open').removeClass('closed');
  link.unbind('click', openSlider);
  link.bind('click', closeSlider);
  }

  var closeSlider = function() {
  link = $(this);
  link.prev('.entry-content').animate({'height': closeHeight}, {duration: duration }, easing);
  link.text(moreText).addClass('closed').removeClass('open');
  link.unbind('click');
  link.bind('click', openSlider);
  }
   
  $('.more-link').bind('click', openSlider);
   
});

Также здесь присутствуют знаки, виде стрелок, которые автоматически показывают, это открытие блока и закрытие, что аналоги поворачиваются в след за действием.

Демонстрация
02 Апреля 2021 Загрузок: 1 Просмотров: 2547 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar