IE Hide and Show Divs

[Total: 0    Average: 0/5]

This example shows how to have IE have as many DIVs as you want, and to hide or show them all

Body Code:

color: green; 
top: 5px; 
border-color: gold; 
border-width: 1px; 
border-style: solid;
visibility: visible;
width: 150px;
background-color: lightpink;
#sm1  { left:  10px; top:  50px; }
#sm2  { left:  20px; top:  70px; }
#sm3  { left:  30px; top:  90px; }
#sm4  { left:  40px; top: 110px; }
#sm5  { left:  50px; top: 130px; }
#sm6  { left:  60px; top: 150px; }
#sm7  { left:  70px; top: 170px; }
#sm8  { left:  80px; top: 190px; }
#sm9  { left:  90px; top: 210px; }
#sm10 { left: 100px; top: 230px; }
var isIE=document.all?true:false;
var layers = isIE?document.all.tags("DIV"):null;
function changeall(v)
 if(!isIE)return; /* only do things for IE */
 for(var i=0;i<layers.length;i++)
function justOne(i,v){ layers[i].style.visibility=v?'hidden':'visible'; }

<a href="javascript:changeall(true);">hide all</a> |
<a href="javascript:changeall(false);">show all</a>
<div class=sm id=sm1 onclick="justOne(0,layers[0].style.visibility=='visible')">number 1</div>
<div class=sm id=sm2 onclick="justOne(1,layers[1].style.visibility=='visible')">number 2</div>
<div class=sm id=sm3 onclick="justOne(2,layers[2].style.visibility=='visible')">number 3</div>
<div class=sm id=sm4 onclick="justOne(3,layers[3].style.visibility=='visible')">number 4</div>
<div class=sm id=sm5 onclick="justOne(4,layers[4].style.visibility=='visible')">number 5</div>
<div class=sm id=sm6 onclick="justOne(5,layers[5].style.visibility=='visible')">number 6</div>
<div class=sm id=sm7 onclick="justOne(6,layers[6].style.visibility=='visible')">
<a onclick="justOne(6,layers[6].style.visibility=='visible')">number 7</a></div>
<div class=sm id=sm8 onclick="justOne(7,layers[7].style.visibility=='visible')">number 8</div>
<div class=sm id=sm9 onclick="justOne(8,layers[8].style.visibility=='visible')">number 9</div>
<div class=sm id=sm10 onclick="justOne(9,layers[9].style.visibility=='visible')">number 10</div>

Times Viewed: 1

Leave a Reply

Your email address will not be published. Required fields are marked *