I'm trying to create a simple javascript accordion that will let me show/hide <p> paragraphs when I click on an <h2>. When the page is loaded, the <p> are automatically hidden. (This part works ok). When you click on the H2, I want the paragraphs to then appear. Something with the h2 onclick event or either the way I'm calling the DOM is not working. I was hoping for some help/guidance.

HTML:
Code:
<div id="content">
<h2>Header 1</h2>
<p>Here is my header 1 paragraph</p>
<h2>Header 2</h2>
<p>Here is my header 2 paragraph</p>
<h2>Header 3</h2>
<p>Here is my header 3 paragraph</p>
</div>
CSS:
Code:
#content h2 {margin-bottom: 0;}
#content p {margin-top: 0;}
JAVASCRIPT:

Code:
window.onload = function() {

var sectionDiv = document.getElementById('content');					
var triggers = sectionDiv.getElementsByTagName('h2');				
var paras = sectionDiv.getElementsByTagName('p');						


for (var i = 0; i<paras.length;i++) {					
paras[i].style.display = "none";				
		}		
	
for (var i = 0; i<triggers.length;i++) {							
	triggers[i].style.display = "block";						
 	triggers[i].onclick = function () {							
		if (this.nextSibling.style.display == "none") {				
		this.nextSibling.style.display = "block";
				} else { 									
this.nextSibling.style.display = "none";							}
}	
}	
}
Thanks!