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

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

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

HTML

<a class="content_toggle" href="#">Показать текст</a>
 
<div class="content_more" style="display: none;">
	<p>Блок скрытого текста...</p>
</div>

JS

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

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

HTML

<a class="content_toggle" href="#">Полный текст</a>
 
<div class="content_more" style="display: none;">
	<p>Блок скрытого текста...</p>
</div>

JS

$(".content_toggle").click(function(){
	$('.content_more').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_more" style="display: none;">
	<p>Блок скрытого текста...</p>
</div>

JS

$(".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;
});

Источник