display block/none in a for loop

How do you expand collapse (or toggle I should say) one div while making the others collapse?

function openThis(){
	var thisExpand = new Array();
		thisExpand[0] = "the_nav";
		thisExpand[1] = "the_blog";
		thisExpand[2] = "main_search";
		thisExpand[3] = "addit_txtboxes";
		thisExpand[4] = "spoke_listbox";
		thisExpand[5] = "other_selections";		
		thisExpand[6] = "66_books";

		for(i=0;i<thisExpand.length;i++){
			var expandThisOne = document.getElementById(thisExpand[i]);
			if(expandThisOne.style.display == 'none'){
			expandThisOne.style.display = 'block'; 
			document.getElementById('minmaxbox_'+i).innerHTML = '[ - ]';
			}else{
			expandThisOne.style.display = 'none'; 
			document.getElementById('minmaxbox_'+i).innerHTML = '[ + ]';
			}
		}
	}

Code (markup):

This doesn't seem to work.

 

Hello,

Below url may help to solve the problem.

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
or
http://www.dynamicdrive.com/dynamicindex1/treeview/index.htm

 

erm...

forget 3-rd party scripts.

here is a vanilla javascript (tested in ie7 and ff 3)

<style>
.box {
    margin: 4px;
    border: 1px solid #ccc;
    width: 250px;
    float: left;
}
.toggler {
    float: left;
    width: 20px;
    margin: 4px;
    margin-right: 0;
    border: 1px solid #000;
    height: 20px;
    text-align: center;
    font-size: 12px;
}
</style>
<div style="width: 290px;">
<div class="toggler" data-rel="the_nav">-</div>
<div class="box" id="the_nav">nav</div>
<br clear="all" />
<div class="toggler" data-rel="the_blog">-</div>
<div class="box" id="the_blog">blog<br />hello from my blog</div>
<br clear="all" />
<div class="toggler" data-rel="main_search">-</div>
<div class="box" id="main_search">search<br /><input /></div>
<br clear="all" />
<div class="toggler" data-rel="addit_txtboxes">-</div>
<div class="box" id="addit_txtboxes">addit</div>
<br clear="all" />
<div class="toggler" data-rel="spoke_listbox">-</div>
<div class="box" id="spoke_listbox">spoke</div>
<br clear="all" />
<div class="toggler" data-rel="other_selections">-</div>
<div class="box" id="other_selections">other<br />hello!</div>
<br clear="all" />
<div class="toggler" data-rel="66_books">-</div>
<div class="box" id="66_books">66</div>
</div>

<script type="text/javascript">

var openLayer = function(objectId) {
    // define all elements
    var elements = ["the_nav", "the_blog", "main_search", "addit_txtboxes", "spoke_listbox", "other_selections", "66_books"], key = elements.length;
    
    var divs = document.getElementsByTagName("div");
    var t = divs.length;
    while (t--) {
        // reset all togglers
        if (divs[t].className == "toggler") {
            var target = divs[t].getAttribute("data-rel");
            divs[t].innerHTML = (target == objectId) ? "-" : "+";
        }
    }

    // close them all cept for the target with objectId
    while (key--) {
        document.getElementById(elements[key]).style.display = (objectId == elements[key]) ? "block" : "none";
    }
}

// set click events for togglers...
var divs = document.getElementsByTagName("div");
var t = divs.length;
while (t--) {
    if (divs[t].className == "toggler") {
        divs[t].onclick = function() {
            openLayer(this.getAttribute("data-rel"));
        }
    }
}

setTimeout("openLayer('the_nav');", 500);
</script>

HTML:

view in action: _http://fragged.org/dev/toggler.php

obviously, move the toggler boxes around, etc - work with your css positioning, cursor styles etc.

good luck