...

View Full Version : display block/none in a for loop



gilgalbiblewhee
09-26-2008, 01:57 AM
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 = '[ + ]';
}
}
}
This doesn't seem to work.

jmrker
09-26-2008, 04:52 AM
I'm not sure of what you want to do with your code,
so this is my best guess. Remove border in CSS as desired.



<html>
<head>
<title>Open / Close</title>
<style type="text/css">
.ocx { width: auto; height: auto; float:left; font-size:1.2em; font-weight:bold; }
.OC { border: 1px solid blue; width: 250px; height: auto; float:left; display:none; }
br { clear:both; }
</style>
<script type="text/javascript">
function openThis(N){
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 (i == N) {
if ((expandThisOne.style.display == 'none') || (expandThisOne.style.display == '')) {
expandThisOne.style.display = 'block';
document.getElementById('minmaxbox_'+i).innerHTML = '[ - ] ';
} else {
expandThisOne.style.display = 'none';
document.getElementById('minmaxbox_'+i).innerHTML = '[ + ] ';
}
} else {
expandThisOne.style.display = 'none';
document.getElementById('minmaxbox_'+i).innerHTML = '[ + ] ';
}
}
}
</script>
</head>
<body>
<div class="ocx" onclick="openThis('0')" id="minmaxbox_0">[ + ]</div>
<div class="OC" id="the_nav">a</div>
<br>
<div class="ocx" onclick="openThis('1')" id="minmaxbox_1">[ + ]</div>
<div class="OC" id="the_blog">b<br>b</div>
<br>
<div class="ocx" onclick="openThis('2')" id="minmaxbox_2">[ + ]</div>
<div class="OC" id="main_search">c<br>c<br>c</div>
<br>
<div class="ocx" onclick="openThis('3')" id="minmaxbox_3">[ + ]</div>
<div class="OC" id="addit_txtboxes">d</div>
<br>
<div class="ocx" onclick="openThis('4')" id="minmaxbox_4">[ + ]</div>
<div class="OC" id="spoke_listbox">e<br>e<br>e</div>
<br>
<div class="ocx" onclick="openThis('5')" id="minmaxbox_5">[ + ]</div>
<div class="OC" id="other_selections">f<br>f</div>
<br>
<div class="ocx" onclick="openThis('6')" id="minmaxbox_6">[ + ]</div>
<div class="OC" id="66_books">g</div>
<br>

</body>
</html>

gilgalbiblewhee
09-26-2008, 05:11 AM
I'm not sure of what you want to do with your code,
so this is my best guess. Remove border in CSS as desired.



<html>
<head>
<title>Open / Close</title>
<style type="text/css">
.ocx { width: auto; height: auto; float:left; font-size:1.2em; font-weight:bold; }
.OC { border: 1px solid blue; width: 250px; height: auto; float:left; display:none; }
br { clear:both; }
</style>
<script type="text/javascript">
function openThis(N){
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 (i == N) {
if ((expandThisOne.style.display == 'none') || (expandThisOne.style.display == '')) {
expandThisOne.style.display = 'block';
document.getElementById('minmaxbox_'+i).innerHTML = '[ - ] ';
} else {
expandThisOne.style.display = 'none';
document.getElementById('minmaxbox_'+i).innerHTML = '[ + ] ';
}
} else {
expandThisOne.style.display = 'none';
document.getElementById('minmaxbox_'+i).innerHTML = '[ + ] ';
}
}
}
</script>
</head>
<body>
<div class="ocx" onclick="openThis('0')" id="minmaxbox_0">[ + ]</div>
<div class="OC" id="the_nav">a</div>
<br>
<div class="ocx" onclick="openThis('1')" id="minmaxbox_1">[ + ]</div>
<div class="OC" id="the_blog">b<br>b</div>
<br>
<div class="ocx" onclick="openThis('2')" id="minmaxbox_2">[ + ]</div>
<div class="OC" id="main_search">c<br>c<br>c</div>
<br>
<div class="ocx" onclick="openThis('3')" id="minmaxbox_3">[ + ]</div>
<div class="OC" id="addit_txtboxes">d</div>
<br>
<div class="ocx" onclick="openThis('4')" id="minmaxbox_4">[ + ]</div>
<div class="OC" id="spoke_listbox">e<br>e<br>e</div>
<br>
<div class="ocx" onclick="openThis('5')" id="minmaxbox_5">[ + ]</div>
<div class="OC" id="other_selections">f<br>f</div>
<br>
<div class="ocx" onclick="openThis('6')" id="minmaxbox_6">[ + ]</div>
<div class="OC" id="66_books">g</div>
<br>

</body>
</html>


Bingo! Thanks!

jmrker
09-26-2008, 05:50 AM
You're most welcome.
Glad I was able to help this time.
Good Luck! :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum