У нас есть некоторое количество, скажем, статей с заголовками. Нам хочется:

1. скрыть текст статей при загрузке страницы,
2. скрывать/раскрывать текст статей при щелчке по заголовку
3. раскрасить четные и нечетные заголовки в разные цвета
4. обеспечить индексацию страницы поисковыми системами (то есть, страница должна работать и при выключенном яваскрипте)

Структура документа:

<ul id="wrapper">
	<li>
		<h2>Title 1</h2>
		<p>Body 1</p>
	</li>
	<li>
		<h2>Title 2</h2>
		<p>Body 2</p>
	</li>
	<li>
		<h2>Title 3</h2>
		<p>Body 3</p>
	</li>
</ul>
					 

Javascript:

<script language="Javascript" type="text/javascript">
						 
	// Пробегаемся по всем li, являющимся дочерними для элемента с id="wrapper"
	
	$("#wrapper > li").each(
		function(index){
			var obj = $(this);
			
			// Находим элементы h2 и устанавливаем им значения CSS и функции onclick
			// После чего прячем элементы p
			
			// Вместо метода css с параметрами можно вызывать метод
			// addClass(index % 2 == 0 ? "even" : "odd")
			// если у нас уже есть css-классы "even" и "odd"	
			
			obj
				.find("h2")
				.css(
					{
						backgroundColor: index % 2 == 0 ? "#ef0000" : "#0000ef",
						cursor: "hand",
						cursor: "pointer",
						color: "#FFF"
					}
				)
				.click(
					function(){
						obj.find("p").toggle();
					}									
				)
				.end()
				.find("p").hide();
		}						
	);
</script>
					

Javascript:

<script language="Javascript" type="text/javascript">
	$(document).ready(function() {
		$("#wrapper p").hide(); //hide initially
		$("#wrapper h2").click (function() {
			$("p", $(this).parent()).slideToggle("slow");
		});
	});
</script>
					

Что происходит в функции click? Мы находим элемент P внутри родительского элемента для элемента h2:

$(

	"p",              // что
	$(this).parent()  // где
);

Javascript:

<script language="Javascript" type="text/javascript">
	$(document).ready(function() {
		$("#wrapper p").hide(); //hide initially
		$("#wrapper h2").click (function() {
			$(this).siblings('p').slideToggle('slow');
		});
	});
</script>