• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Скрыть часть текста описания на jQuery + CSS (Как правильно скрыть часть текста при помощи jQuery + CSS)
Скрыть часть текста описания на jQuery + CSS
Kosten
Дата: Четверг, 2020-07-30, 22:49 | Сообщение 1
Оффлайн
Администраторы
Сообщений:28886
Награды: 62


Здесь мы изначально создаем фиксированную высоту, где часть текста будет скрыто, а верхнее часть открытая. Что далее идет кнопка для открытия полного текста описания, но с красивым затуханием знаков, где изначально наблюдаем знаки. Но в последствии они все менее видны и просто исчезают, и в этом месте появится функция для открытие далее, что при клике будет доступен полностью текст описания.



HEAD

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

HTML

Код
<div class="content_block hide">
    <p>Иногда вашей соответствующей аудитории может потребоваться запрос, который позволит им правильно взаимодействовать с вашим контентом.   Самые кликабельные слова в ваших социальных сетях могут помочь вашей аудитории узнать самые распространенные вещи на вашем сайте.</p>
    <p>Чтобы заставить множество людей использовать ваш отличный контент на вашей платформе, используйте такие ключевые слова, как например, чтобы сделать это успешно. Если вы хотите, чтобы ваши зрители реагировали и делали что-то с вашим постом, никогда не оставляйте акции или клики и используйте четкую директиву.</p>
    <p>Если ваш сайт не реагирует на мобильную платформу, вы потеряете много потенциальных клиентов, что также приведет к ухудшению вашего рейтинга. Это происходит потому, что многие потребители предпочитают использовать высокочувствительный веб-сайт и сайт, который удобен для мобильных устройств. Используйте инструменты исследования, такие как Screenfly, которые будут измерять реакцию вашего экрана.</p>
</div>

<a class="content_toggle" href="#">Подробнее</a>

CSS

Код
body {
    font-size:14px;
    padding: 15px 20px;
}
/* Блок с текстом */
.content_block {
    overflow: hidden;
    position: relative;    
}
.content_block.hide {
    height: 300px;
}
.content_block.hide:after{
    content: "";
    display: block;
    height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 75%)
}
p {
    font-size: 16px;
    color: #777;
    margin: 0 0 10px 0;
    padding: 0;
    line-height: 1.6;
}

/* Кнопка */
.content_toggle {
    display: inline-block;
    padding: 15px 20px;
    background: #672cc5;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    margin-bottom: 20px;
    border-radius: 5px;
    border-bottom: 3px solid #32145a;
}
.content_toggle:hover {
    color: #fff;
    background: #7c4acc;
    border-bottom: 3px solid #32145a;
}
.content_toggle:active {
    background: #34106d;
}

JS

Код
$(document).ready(function(){
    $('.content_toggle').click(function(){
  $('.content_block').toggleClass('hide');    
  if ($('.content_block').hasClass('hide')) {
   $('.content_toggle').html('Подробнее');
  } else {
   $('.content_toggle').html('Скрыть');
  }  
  return false;
    });    
});

На этом установка завершена!

Демонстрация
Прикрепления: 6635048.png(146.2 Kb) · dsanulas.zip(5.4 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Скрыть часть текста описания на jQuery + CSS (Как правильно скрыть часть текста при помощи jQuery + CSS)
  • Страница 1 из 1
  • 1
Поиск: