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


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

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



1. Вариант

Показ блока по клику

HEAD

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

HTML

Код
<a class="content_toggle" href="#">Показать текст</a>

<div class="content_block" style="display: none;">
    <p>Ваш рейтинг может быть сокращен, как только Google обнаружит, что вы используете ярлыки, в основном, из ненадежных источников. Не обращайте внимания на любые сообщения или объявления, рекламирующие или продающие ссылки по более низкой цене. </p>    
</div>

CSS

Код
body {
    font-size:14px;
    padding: 15px 20px;
}
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').slideToggle(300);      
  return false;
    });
});

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

Демонстрация

2. Вариант:

Меняем текста в кнопке

Также подключаем библиотеку, как на первом варианте.

HTML

Код
<a class="content_toggle" href="#">Показать текст</a>

<div class="content_block" style="display: none;">
    <p>Всегда следите за тем, чтобы ваш веб-сайт был удобным для мобильных устройств, поскольку Google обычно отдает предпочтение мобильному подходу. Убедитесь, что вы являетесь частью трендовых вещей, так как вы будете наслаждаться отличным и бесперебойным движением.</p>    
</div>

CSS

Код
body {
    font-size:14px;
    padding: 15px 20px;
}
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').slideToggle(300, function(){
   if ($(this).is(':hidden')) {
    $('.content_toggle').html('Показать текст');
   } else {
    $('.content_toggle').html('Скрыть текст');
   }       
  });
  return false;
    });
});

Установка завершена!

Демонстрация

Третий вариант:

Изменение кнопки

Аналогично прописываем библиотеку

HTML

Код
<a class="content_toggle" href="#">Показать текст</a>

<div class="content_block" style="display: none;">
    <p>Скрытый текст в основном используется при создание сайта с большим объёмом содержания страницы, или для сокрытия определённой информации, которая нужна только заинтересованным пользователям.</p>    
</div>

CSS

Код
body {
    font-size:14px;
    padding: 15px 20px;
}
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;
}

.content_toggle.open {
    background: #29b935;
}
.content_toggle.open:hover {
    background: #63bd6a;
}
.content_toggle.open:active {
    background: #326136;
}

JS

Код
$(document).ready(function(){
    $('.content_toggle').click(function(){
  $('.content_block').slideToggle(300, function(){
   if ($(this).is(':hidden')) {
    $('.content_toggle').html('Показать текст');
    $('.content_toggle').removeClass('open');
   } else {
    $('.content_toggle').html('Скрыть текст');
    $('.content_toggle').addClass('open');
   }       
  });
  return false;
    });
});

Установочный процесс завершен!

Демонстрация
Прикрепления: 0186011.png(39.2 Kb) · show-hide.zip(3.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Показать и скрыть текст в блоке на jQuery (Как с помощью jQuery показать или скрыть определенный текст)
  • Страница 1 из 1
  • 1
Поиск: