Вашему вниманию отличное решение для скрытия и показа текста под кнопкой, где вся система работает на 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;
});
});
Установочный процесс завершен!
Демонстрация
