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

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

1

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

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

<div class="content_more" style="display: none;">
	<p>Блок скрытого текста...</p>
</div>
HTML
$(".content_toggle").click(function(){
	$('.content_more').slideToggle(300);      
	return false;
});

/* 2й вариант: */
$(".content_toggle").click(function(){
	$(this).next().slideToggle(300);      
	return false;
});
JS
2

Изменение текста в кнопке

<a class="content_toggle" href="#">Полный текст</a>

<div class="content_more" style="display: none;">
	<p>Блок скрытого текста...</p>
</div>
HTML
$(".content_toggle").click(function(){
	$('.content_more').slideToggle(300, function(){
		if ($(this).is(':hidden')) {
			$('.content_toggle').html('Полный текст');
		} else {
			$('.content_toggle').html('Скрыть текст');
		}							
	});
	return false;
});
JS

Пример

3

Изменение класса

<a class="content_toggle" href="#">Полный текст</a>

<div class="content_more" style="display: none;">
	<p>Блок скрытого текста...</p>
</div>
HTML
$(".content_toggle").click(function(){
	$('.content_more').slideToggle(300, function(){
		if ($(this).is(':hidden')) {
			$('.content_toggle').html('Полный текст');
			$('.content_toggle').removeClass('open');
		} else {
			$('.content_toggle').html('Скрыть текст');
			$('.content_toggle').addClass('open');
		}							
	});
	return false;
});
JS
06.12.2018, обновлено 27.08.2019 2352

Поделится

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

Все чаще на сайтах появляются диалоги «Мы используем cookie-файлы...», зачем это делают? Cookies, IP-адреса относятся к...
Несколько примеров как сделать кнопки прокрутки страницы вверх и вниз. Для скроллинга используется jQuery функция...
В случаях где анонсы не заполнены, сформировать и вывести их можно несколькими способами...