Показать/скрыть блок текста на jQuery

Примеры как на jQuery и показывать скрывать определенный текст по клику на ссылку или кнопку.

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

<div class="content_block" style="display: none;">
	<p>Блок скрытого текста...</p>
</div>

<script src="/js/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$('.content_toggle').click(function(){
		$('.content_block').slideToggle(300);      
		return false;
	});
});
</script>
HTML

Пример:

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

<div class="content_block" style="display: none;">
	<p>Блок скрытого текста...</p>
</div>

<script src="/js/jquery.min.js"></script>
<script>
$(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;
	});
});
</script>
HTML

Пример:

3

Изменить вид кнопки при показе и скрытии текста можно сделать добавлением класса, например «open».

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

<div class="content_block" style="display: none;">
	<p>Блок скрытого текста...</p>
</div>

<script src="/js/jquery.min.js"></script>
<script>
$(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;
	});
});
</script>
HTML
4

Если нужно скрыть длинный текст, то можно сделать блок с фиксированной высотой и эффектом плавного затухания текста.

<div class="content_block hide">
	<p>Блок длинного текста...</p>
</div>

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

<script src="/js/jquery.min.js"></script>
<script>
$(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;
	});				
});
</script>
HTML
.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%)
}
CSS

Пример:

06.12.2018, обновлено 16.11.2021
75421

Комментарии 3

Ruslan skurjat Ruslan skurjat
28 марта 2020 в 17:38
Подскажите, а как сделать чтоб раскрывалась часть текста если несколько блоков? Ато теперь применил второй вариант, у меня четыре блока, но раскрываются все а не по одному. Как реализрвать, чтоб раскрывались по отдельности каждый блок а не все сразу?
William Nash William Nash
26 ноября 2021 в 17:42
сделайте возможность открывать несколько блоков по отдельности
Дмитрий Смолишкович Дмитрий Смолишкович
21 июля 2023 в 17:41
Привет! Напишите пжл как сделать чтобы эффект сохранялся при хождении по другим страницам сайта. Сейчас приходится на каждой такой странице заново тыкать скрыть/показать.

, чтобы добавить комментарий.

Другие публикации

Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
12544
+3
Главное меню для мобильной версии сайта
Не очень сложное раскрывающееся меню для мобильной версии сайта на JQuery.
43975
+12
Показать/скрыть пароль
Чтобы включить отображение пароля в поле password нужно заменить атрибут type="password" на type="text", сделать это можно на jQuery или чистом JS.
95329
+21
Модальное окно на затемненном фоне
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
68154
+23
Табы/вкладки на jQuery
Сделать табы на jQuery очень просто, сделаем HTML разметку и добавим к нему JS код...
31566
+7
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
60602
+7