Javascript Counter working but not hiding divs correctly
<p>I am working on a site and using javascript to scroll through text.  I am using a counter and its working, but when it goes through the conditional statements it's not hiding the divs or being consistent.  Any thoughts on why this could be happening?</p>

<p>Thanks!</p>

<p>html:</p>

<pre><code>    &lt;div id="arrow2"&gt;
        &lt;a id="arrowRight" href="javascript:ltoggle('box');"&gt;&lt;img alt="Arrow Right" height="auto" src="images/rightarrow.png"&gt;&lt;/a&gt;
    &lt;/div&gt;

    &lt;div id="content"&gt;
        &lt;div class="boxPosition" id="box1"&gt;
            &lt;p&gt;This is a destination wedding.  Come early, and stay late!&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="boxPosition" id="box2"&gt;
            &lt;p&gt;Festivities will start on Friday, August 16th.&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="boxPosition" id="box3"&gt;
            &lt;p&gt;The wedding will be on Sunday, August 18th late in the day, so you should plan to take Monday off!&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="boxPosition" id="box4"&gt;
            &lt;p&gt;a&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="boxPosition" id="box5"&gt;
            &lt;p&gt;b&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="boxPosition" id="box6"&gt;
            &lt;p&gt;c&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="boxPosition" id="box7"&gt;
            &lt;p&gt;d&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="boxPosition" id="box8"&gt;
            &lt;p&gt;e&lt;/p&gt;
        &lt;/div&gt;
</code></pre>

<p>js:</p>

<pre><code>    var counter = 1;
    var numBoxes = 8;

    function toggle(divName){
counter++
var ele = document.getElementById(divName + counter);
console.log(divName + counter);

if(ele.style.display == "block"){
    ele.style.display = "none";
}
else{
    ele.style.display = "block";
}
if(counter==numBoxes){
    counter = 0;
}

    }
</code></pre>
