Javascript - Set Text When Accordion Expands/Collapses

Question

I have a JavaScript accordion type menu. I want to have an indicator in front of the menu section headers that shows (+) when the section is collapsed and (-) when it is expanded. Based on the code below, I've been able to this, however the indicator only changes on click and is not set based on whether the section is expanded or collapsed. I've been looking at this for a few hours now and would appreciate any extra eyes that may be able to figure out the logic that is escaping me.

Here's a JSFiddle (Click Me)
Here's the Javascript:

var ContentHeight;
var TimeToSlide = 250.0;
var opening;
var openAccordion = '';

function runAccordion(index, height)
{
  ContentHeight = height;
  var nID = "Accordion" + index + "Content";
  if(openAccordion == nID)
    nID = '';

  setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" 
      + openAccordion + "','" + nID + "')", 33);

  openAccordion = nID;
}
function animate(lastTick, timeLeft, closingId, openingId)
{  
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;

  opening = (openingId == '') ? null : document.getElementById(openingId);
  var closing = (closingId == '') ? null : document.getElementById(closingId);

  if(timeLeft <= elapsedTicks)
  {
    if(opening != null)
      opening.style.height = ContentHeight + 'px';

    if(closing != null)
    {
      closing.style.display = 'none';
      closing.style.height = '0px';
    }
    return;
  }

  timeLeft -= elapsedTicks;
  var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight);

  if(opening != null)
  {
    if(opening.style.display != 'block')
      opening.style.display = 'block';
    opening.style.height = (ContentHeight - newClosedHeight) + 'px';
  }

  if(closing != null)
    closing.style.height = newClosedHeight + 'px';

  setTimeout("animate(" + curTick + "," + timeLeft + ",'" 
      + closingId + "','" + openingId + "')", 33);
}
function changeText(index){

    var accordionID = "Accordion" + index + "Content";
    var indicatorID = document.getElementById("expandIndicator" + index);
    var currentIndicator = indicatorID.innerHTML;
    var openIndicator = "(+)";
    var closedIndicator = "(-)";

    if (currentIndicator == openIndicator) {
        indicatorID.innerHTML = closedIndicator; }
    else {
        indicatorID.innerHTML = openIndicator; }
}

And here is the HTML/CSS:

<style type="text/css">
    #container {
        padding-top:5px;
    }

    .stepHeader, .AccordionContent, .AccordionContainer
    {
      position:relative;
      width:735px;
    }

    .stepHeader
    {
      /*height:25px;*/
      overflow:hidden;
      cursor:pointer;
      color:black;
      font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
      text-transform:uppercase;
      vertical-align:middle;
      text-align:left;
      display:table-cell;
      -moz-user-select:none;
      border-bottom:solid #FFFFFF;
      padding:5px;
    }

    #step1 {
      background-color:#FF7F32;
    }

    #step2 {
      background-color:#ff8a43;
    }

    #step3 {
      background-color:#ff9454;
    }

    #step4 {
      background-color:#ff9f65;
    }

    #step5 {
      background-color:#ffa976;
    }

    #step6 {
      background-color:#ffa976;
    }

    .AccordionContent
    {
      height:0px;
      overflow:auto;
      display:none; 
      background-color:#f8f8f0;
    }

    .AccordionContainer
    {
        padding:0 0px 0 5px;
    }

    .expandIndicator {  
        width:15px;
        display:inline;
        margin-right:5px;
    }

    .stepTitle {
        width:400px;
        display:inline;
    }
</style>

<div id="container">
            <div id="AccordionContainer" class="AccordionContainer">

              <div onclick="runAccordion(1,100);">
                <div class="stepHeader" id="step1" onselectstart="return false;" onclick="changeText(1)">
                  <div id="expandIndicator1" class="expandIndicator">(+)</div> 
                  <div class="stepTitle">Step 1</div>
                </div>
              </div>
              <div id="Accordion1Content" class="AccordionContent">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </div>

              <div onclick="runAccordion(2,100);">
                <div class="stepHeader" id="step2" onselectstart="return false;" onclick='changeText(2)'>
                  <div id="expandIndicator2" class="expandIndicator">(+)</div>
                  <div class="stepTitle">Step 2</div>
                </div>
              </div>
              <div id="Accordion2Content" class="AccordionContent">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </div>

              <div onclick="runAccordion(3,100);">
                <div class="stepHeader" id="step3" onselectstart="return false;" onclick='changeText(3)'>
                  <div id="expandIndicator3" class="expandIndicator">(+)</div>
                  <div class="stepTitle">Step 3</div>
                </div>
              </div>
              <div id="Accordion3Content" class="AccordionContent">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </div>
            </div>
</div>

Answer 1

What you need to do is set all the indicators to '+' in the changeText method before doing anything else. Add the following code before the if statement in the changeText method:

document.getElementById("expandIndicator1").innerHTML = openIndicator;
document.getElementById("expandIndicator2").innerHTML = openIndicator;
document.getElementById("expandIndicator3").innerHTML = openIndicator;

Or, if you have too many content divs:

var numberOfContentDivs = 36;
for ( var i = 1; i <= numberOfContentDivs; i++) {
    document.getElementById("expandIndicator" + i).innerHTML = openIndicator;
}