jQuery Скрыть/показать блок при клике на заголовок

[Heidel]

1 вариант

Скрипт

	<sсriрt>
	$(document).ready(function(){
		$('.caption img').click(function(){
			var body$ = $(this).closest('.module').find('.body');
				if (body$.is(':hidden')) {
					body$.show();
				}
				else {
					body$.hide();
				}
			});
	});
	</sсriрt>

Вместо closest можно использовать parents

HTML-код

	<div class="module">
		<div class="caption">
			<span>Заголовок модуля</span>
			<img src="http://i.imgur.com/qLEB0.png" alt="" title="Свернуть/развернуть блок" style="cursor: pointer;"/>
		</div>
		<div class="body">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nibh non eros scelerisque blandit ut quis sapien. Phasellus quis ultrices turpis. Vestibulum facilisis convallis lorem, at fermentum libero sagittis at. 
		</div>
	</div>
	
	<div class="module">
		<div class="caption">
			<span>Заголовок модуля</span>
			<img src="http://i.imgur.com/qLEB0.png" alt="" title="Свернуть/развернуть блок" style="cursor: pointer;"/>
		</div>
		<div class="body">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nibh non eros scelerisque blandit ut quis sapien. Phasellus quis ultrices turpis. Vestibulum facilisis convallis lorem, at fermentum libero sagittis at. 
		</div>
	</div>

http://jsfiddle.net/ZZszj/4/

2 вариант

	<sсriрt>
	$(function(){
		$('.caption img').click(function(){
			var body$ = $(this).parents('.module').find('.body').toggle();
			});
	});
	</sсriрt>

http://jsfiddle.net/ZZszj/3/

3 вариант Изменения заголовка после сворачивания/разворачивания текста

	<sсriрt>
	$(function(){
		$('.caption img').click(function(){
			var body$ = $(this).parents('.module').find('.body')
				.toggle('slow', function(){
					$(this).closest('.module')
						.toggleClass('rolledup', $(this).is(':hidden'));
						});
			});
	});
	</sсriрt>

http://jsfiddle.net/ZZszj/8/

UPD
У каждого пункта списка есть скрытый текст, при клике на пункт списка текст показывается.
http://jsfiddle.net/ZZszj/23/

изменение кликнутого пункта списка (путем добавления/убирания класса)
http://jsfiddle.net/ZZszj/27/

@темы: jQuery, Ссылки

Comments

[fual]

слушай а что это за тема с
var body$ ? в чем фишка доллара после названия?

[Heidel]

символ $ в имени переменной (в начале или в конце) служит для напоминания, что переменная содержит ссылку на обернутый набор, а не на
элемент или объект какого-то другого типа. вот и всё.