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


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



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)
Qwazor
Дата: Вторник, 2021-05-25, 10:09 | Сообщение 2
Оффлайн
Проверенные
Сообщений:56
Награды: 0


не работает
Страна: (RU)
Kosten
Дата: Вторник, 2021-05-25, 14:20 | Сообщение 3
Оффлайн
Администраторы
Сообщений:37897
Награды: 65


Это есть 4 вариант который что то не работает на codepen.io, но почему то на источнике все нормально.

Также под споллер эта кнопка с функцией скрытия подойдет.
Страна: (RU)
Kosten
Дата: Вторник, 2021-05-25, 14:30 | Сообщение 4
Оффлайн
Администраторы
Сообщений:37897
Награды: 65


Можно такой вариант задействовать.

На сайте много вариаций - нужно только искать.
Страна: (RU)
Qwazor
Дата: Среда, 2021-05-26, 09:22 | Сообщение 5
Оффлайн
Проверенные
Сообщений:56
Награды: 0


Да вот как раз 4й вариант был бы самым оптимальным. Там большой текст и классно когда только первый абзац видно, а дальше подробнее..
Страна: (RU)
Сопрано
Дата: Среда, 2021-05-26, 16:14 | Сообщение 6
Оффлайн
Vip
Сообщений:456
Награды: 4


Цитата Qwazor ()
не работает


А так:


See the Pen
Показать или скрыть блок текста
by Димон Разведос (@razvedocs)
on CodePen.




Дело в настройках в CSS

Код
.content_block.hide {
    height: 200px;
}
Страна: (RU)
Qwazor
Дата: Четверг, 2021-05-27, 10:03 | Сообщение 7
Оффлайн
Проверенные
Сообщений:56
Награды: 0


Всё также прописал, также скрывает весь текст, а не часть, не знаю почему, прописано было один в один всё.

Вообщем я пошел другим путём без JS чисто на CSS

Страна: (RU)
Kosten
Дата: Четверг, 2021-05-27, 13:24 | Сообщение 8
Оффлайн
Администраторы
Сообщений:37897
Награды: 65


Qwazor, нужно было историю браузера почистить и потом посмотреть. Но если через чистые стили, то это лучше, не так весит.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Скрыть часть текста описания на jQuery + CSS (Как правильно скрыть часть текста при помощи jQuery + CSS)
  • Страница 1 из 1
  • 1
Поиск: