Javascript for coding expanding and collapsing content

JavaScript
1

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/issues/090113/Narrative-Nonfiction

here’s where I need the stuff to go:

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 &lt; divs.length; i++ ) {
    if ( divs[i].className == 'expandingBtn' ) expandingBtn.push( divs[i] );
  }

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

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

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

  // Hide all items
  for ( var i = 0; i &lt; 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 &lt; element.childNodes.length; i++ ) {
    if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
  }
}
 //]]&gt;
&lt;/script&gt;

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—to inform readers about how a brave teenager stood up to the Taliban—as well as an implicit purpose—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’ 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 (“fear was her constant companion”) and metaphor (Malala’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;
}