Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Mar 2005
    Posts
    735
    Thanks
    4
    Thanked 1 Time in 1 Post

    display block/none in a for loop

    How do you expand collapse (or toggle I should say) one div while making the others collapse?
    Code:
    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.
    Compare bible texts (and other tools):
    TheWheelofGod

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb Consider this ...

    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.

    PHP Code:
    <html>
    <
    head>
    <
    title>Open Close</title>
    <
    style type="text/css">
    .
    ocx widthautoheightautofloat:leftfont-size:1.2emfont-weight:bold; }
    .
    OC border1px solid bluewidth250pxheightautofloat:leftdisplay: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=0i<thisExpand.lengthi++) {
         var 
    expandThisOne document.getElementById(thisExpand[i]);
        if (
    == 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> 

  • Users who have thanked jmrker for this post:

    gilgalbiblewhee (09-26-2008)

  • #3
    Regular Coder
    Join Date
    Mar 2005
    Posts
    735
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by jmrker View Post
    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.

    PHP Code:
    <html>
    <
    head>
    <
    title>Open Close</title>
    <
    style type="text/css">
    .
    ocx widthautoheightautofloat:leftfont-size:1.2emfont-weight:bold; }
    .
    OC border1px solid bluewidth250pxheightautofloat:leftdisplay: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=0i<thisExpand.lengthi++) {
         var 
    expandThisOne document.getElementById(thisExpand[i]);
        if (
    == 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!
    Compare bible texts (and other tools):
    TheWheelofGod

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Thumbs up

    You're most welcome.
    Glad I was able to help this time.
    Good Luck!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •