Hello. I'm somewhat new and shaky on Javascript. I need to make an area of a web page expand and collapse to reveal hidden content, and the close the content when not needed or wanted.

My concept is this:
I have H3 elements with the title, then an icon floating to the right of that h3 ( a circle with a plus sign that will hold the event handler - if I'm using the correct term), when clicked, it should expand or reveal the content that I have hidden by default, then the image should change to be a circle with a minus sign that would then hide the content when clicked.

I'm thinking that I should make that DIV which holds the event handler (or the image that does the action when clicked) with a background image of the +/- (whichever is needed at the time) since I have coded the CSS to have a background image of the "+" for shown and "-" for hidden, rather than have a static image of the "+" inline in the HTML.

I also want to point out that since I'm coding inside of a content section of a CMS, I don't have access to the <BODY> tag to make the "onLoad=" code, and I have to use Javascript (since under IE9 won't read CSS3)

I was working with this Javascript here that I found on a tutorial, but it doesn't seem to be working for me. Could it be that I have the wrong code to make up for the lack of access to the <BODY> tag?

here's the page:
http://scope-stage.scholastic.com/is...ive-Nonfiction

here's where I need the stuff to go:
Screen Shot 2013-08-30 at 9.38.45 AM.png

here's my Javascript:

//<![CDATA[

function init() {
document.getElementsByTagName('input')[0].focus();
}
window.onload = init;

var expandingBtn = new Array();

function init() {

var divs = document.getElementsByTagName( 'div' );
for ( var i = 0; i < divs.length; i++ ) {
if ( divs[i].className == 'expandingBtn' ) expandingBtn.push( divs[i] );
}

for ( var i = 0; i < expandingBtn.length; i++ ) {
var img = getFirstChildWithTagName( expandingBtn[i], 'img' );
img.onclick = toggleItem;
}

for ( var i = 1; i < expandingBtn.length; i++ ) {
expandingBtn[i].className = 'expandingBtn hide';
}
}

function toggleItem() {
var itemClass = this.parentNode.className;

// Hide all items
for ( var i = 0; i < expandingBtn.length; i++ ) {
expandingBtn[i].className = 'expandingBtn hide';
}

// Show the section
if ( itemClass == 'expandingBtn hide' ) {
this.parentNode.className = 'expandingBtn';
}
}

function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}
//]]>
</script>

acting upon this markup (I've only included one section, so as to save space in this post, but it's replicated with each respective title):

<h3 class="colorScheme">
Complexity Factors</h3>
<div class="expandingBtn">
<a href=""><img alt="view Complexity Factors" src="/resource/uploads_scope/img/expandBtn.png" /></a></div>
<p>
See how this text will challenge your students.</p>
<!--THIS SECTION WILL BE HIDDEN UNTIL A THE EXPAND BUTTON IS CLICKED-->
<div class="hidden">
<h4>
Purpose</h4>
<p class="times">
The article has a clear purpose&mdash;to inform readers about how a brave teenager stood up to the Taliban&mdash;as well as an implicit purpose&mdash;to show how just getting an education is difficult for many young people around the world.</p>
<h4>
Knowledge Demands</h4>
<p class="times">
Comprehension will be aided by knowledge of current world events and geography. The major topics (free speech, the Taliban, terrorism, girls&rsquo; education worldwide, fighting oppression) will be unfamiliar to many students.</p>
<h4>
Language Conventionality and Clarity/h4>
<p class="times">
<strong>Vocabulary/strong> Many higher academic vocabulary words (e.g., oppressive, pseudonym, unwittingly)</p>
<p class="times">
<strong>Figurative language/strong> Includes personification (&ldquo;fear was her constant companion&rdquo and metaphor (Malala&rsquo;s voice is likened to a weapon)</p>
<h4>
Structure</h4>
<p class="times">
A nonlinear structure that starts in 2012 then goes back to 2007 and then forward to 2013. Includes narrative and informational passages.</p>
</div>
<!--THIS ENDS THE FIRST HIDDEN SECTION-->

and finally my CSS:

/******EXPAND AND COLLAPSE BUTTONS******/

.expandingBtn.hide {
float:right;
background-image'hideBtn.png');
margin-left:10px;
}

.expandingBtn:hover {
cursor: pointer;
}

.expandingBtn div { margin:0px;
}

.hidden {
display: none;
}
.expandingBtn {
display: inline-block;
float: none;
}