• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Показать и скрыть блок текста на jQuery (Скрыть/показать часть текста, используя только Javascript)
Показать и скрыть блок текста на jQuery
Kosten
Дата: Понедельник, 2019-09-09, 03:46 | Сообщение 1
Онлайн
Администраторы
Сообщений:24686
Награды: 57


Решение, которое есть на всех сайтах, это показать и скрыть текст при нажатии. Но здесь мы создадим кнопку, где при скрытом варианте она будет одним цветом, где будет надпись, чтоб ее открыть. Как только делаем клик, надпись меняется, это чтоб закрыть, а также аналогично меняется палитра цвета и появляется материал, что изначально был скрыт.

При открытие страницы:



При клике на кнопку:



В этом варианте нужно подключить библиотеку.

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

HTML

Код
<a class="pokazat-opisaniye" href="#">Полный текст</a>
<div class="opshow-description" style="display: none;">
<p>Блок скрытого текста...</p>
</div>

CSS

Код
p {
    font-size: 14px;
    color: #777;
    margin: 0 0 10px 0;
    padding: 0
}
.pokazat-opisaniye {
    display: inline-block;
    padding: 15px 20px;
    background: #32145A;
    font-size: 16px;
    text-decoration: none;
    color: #ededf3;
    margin-bottom: 20px;
}
.pokazat-opisaniye.open {
    background: #e4970a;
    color: #ededf3;
}

JS

Код
$(".pokazat-opisaniye").click(function(){
    $('.opshow-description').slideToggle(300, function(){
  if ($(this).is(':hidden')) {
   $('.pokazat-opisaniye').html('Полный текст');
   $('.pokazat-opisaniye').removeClass('open');
  } else {
   $('.pokazat-opisaniye').html('Скрыть текст');
   $('.pokazat-opisaniye').addClass('open');
  }       
    });
    return false;
});

Здесь уже самостоятельно можно сделать красивое оформление для кнопки.

Демонстрация
Прикрепления: 5169032.png(1.2 Kb) · 7101548.png(2.8 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Показать и скрыть блок текста на jQuery (Скрыть/показать часть текста, используя только Javascript)
  • Страница 1 из 1
  • 1
Поиск: