Exanpding text menu II (IE only)

[Total: 0    Average: 0/5]

This menu will show and hide the contents of a main category.

Body Code:

<style>
a:hover {color:red}
</style>
<script language="JavaScript">
<!--
var item1disp=0;
var item2disp=0;
var item3disp=0;
var color=0;

window.onerror=errortrap;

function errortrap(msg,url,line)
{ 
return true;
}
var setEmTo="None"; // "None" or "Inline" 
function setAll(_v) {
  document.all.item1d1.style.display=_v; 
  document.all.item1d2.style.display=_v; 
  document.all.item1d3.style.display=_v; 
  document.all.item1d4.style.display=_v; 
  item1disp=0; 
  document.all.item2d1.style.display=_v; 
  document.all.item2d2.style.display=_v; 
  item2disp=0; 
  document.all.item3d1.style.display=_v; 
  document.all.item3d2.style.display=_v; 
  document.all.item3d3.style.display=_v; 
  item3disp=0; 
}

function OutlineClick() {
  var objSrc=window.event.srcElement;
  setAll(setEmTo);
  if (objSrc.id=="item1"){
    if (item1disp==0){ 
      document.all.item1d1.style.display="Inline";
      document.all.item1d2.style.display="Inline"; 
      document.all.item1d3.style.display="Inline"; 
      document.all.item1d4.style.display="Inline"; 
      item1disp=-1; 
    }else{
      document.all.item1d1.style.display="None"; 
      document.all.item1d2.style.display="None"; 
      document.all.item1d3.style.display="None"; 
      document.all.item1d4.style.display="None"; 
      item1disp=0; 
    }
  }else{
    if (objSrc.id=="item2"){
      if (item2disp==0){ 
        document.all.item2d1.style.display="Inline"; 
        document.all.item2d2.style.display="Inline"; 
        item2disp=-1; 
      }else{
        document.all.item2d1.style.display="None"; 
        document.all.item2d2.style.display="None"; 
        item2disp=0; 
      }
    }else{
      if (objSrc.id=="item3"){
        if (item3disp==0){ 
          document.all.item3d1.style.display="Inline"; 
          document.all.item3d2.style.display="Inline"; 
          document.all.item3d3.style.display="Inline"; 
          item3disp=-1; 
        }else{
          document.all.item3d1.style.display="None"; 
          document.all.item3d2.style.display="None"; 
          document.all.item3d3.style.display="None"; 
          item3disp=0; 
        }
      } 
    }
  }
}

function TurnRed()
{
var elem=window.event.srcElement;
color=elem.style.color;
elem.style.color="RED";
}

function TurnBlack()
{
var elem=window.event.srcElement;
elem.style.color=color;
}


//-->
</script>

<A>Click Below and See What happens (IE only)</A></P>
<div id=Outline onclick="OutlineClick()">
<P> </P>
<P>
<div id=item1 style="cursor: hand" onmouseover="TurnRed()" onmouseout="TurnBlack()"> Catagory 1 <BR>
<div id=item1d1 style="display:None">   <A HREF="http://www.js-examples.com/">Index 1</A><BR></div>
<div id=item1d2 style="display:None">   <A HREF="http://www.js-examples.com/">Index 2</A><BR></div>
<div id=item1d3 style="display:None">   <A HREF="http://www.js-examples.com/">Index 3</A><BR></div>
<div id=item1d4 style="display:None">   <A HREF="http://www.js-examples.com/">Index 4</A><BR></div>
</div>
<div id=item2 style="cursor: hand" onmouseover="TurnRed()" onmouseout="TurnBlack()"> Catagory 2 <BR>
<div id=item2d1 style="display:None">   <A HREF="http://www.js-examples.com/">Index 1</A><BR></div>
<div id=item2d2 style="display:None">   <A HREF="http://www.js-examples.com/">Index 2</A><BR></div>
</div>
<div id=item3 style="cursor: hand" onmouseover="TurnRed()" onmouseout="TurnBlack()"> Catagory 3 <BR>
<div id=item3d1 style="display:None">   <A HREF="http://www.js-examples.com/">Index 1</A><BR></div>
<div id=item3d2 style="display:None">   <A HREF="http://www.js-examples.com/">Index 2</A><BR></div>
<div id=item3d3 style="display:None">   <A HREF="http://www.js-examples.com/">Index 3</A><BR></div>
</div>
</div>
</P>

Times Viewed: 0

Leave a Reply

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