We have some articles with headers

1. We want bodies of these articles to be hidden on page load.
2. We want to toggle the visibility of these articles by clicking on the headers.
3. We also want to color odd and even headers differently.
4. And we want the page to be indexed by search engines.

Document structure:

<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">
						 
						 // Run through all li's that are children of the element with  id="wrapper"
	
	$("#wrapper > li").each(
		function(index){
			var obj = $(this);
			
			// Find all h2 elements, set their CSS properties and the onclick function
			// After that hide all P elements
			
			// Instead of using the css method we could have used
			// addClass(index % 2 == 0 ? "even" : "odd")
			// had we had CSS classes "even" and "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>
					

What happens in the click method? We find element P in the parent element of h2:

$(

	"p",              // what
	$(this).parent()  // where
);

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>