Question

I’m using a showhide script that I’ve altered in order to enable it for different levels of a menu. Currently what I have is:

<script type="text/javascript">
visibleDiv1 = "";
function showHide1(elementid1,qstring){
  if (document.getElementById(elementid1).style.display == 'none'){
    document.getElementById(elementid1).style.display = '';
    if(visibleDiv1 != ""){
      if(visibleDiv1 != elementid1){
        document.getElementById(visibleDiv1).style.display = 'none';
      }
    }
    visibleDiv1 = elementid1;
  } else {
   document.getElementById(elementid1).style.display = 'none';
  }
}

visibleDiv2 = "";
function showHide2(elementid2,qstring){
  if (document.getElementById(elementid2).style.display == 'none'){
    document.getElementById(elementid2).style.display = '';
    if(visibleDiv2 != ""){
      if(visibleDiv2 != elementid2){
        document.getElementById(visibleDiv2).style.display = 'none';
      }
    }
    visibleDiv2 = elementid2;
  } else {
    document.getElementById(elementid2).style.display = 'none';
  }
}

visibleDiv3 = "";
function showHide3(elementid3,qstring){
  if (document.getElementById(elementid3).style.display == 'none'){
    document.getElementById(elementid3).style.display = '';
    if(visibleDiv3 != ""){
      if(visibleDiv3 != elementid3){
        document.getElementById(visibleDiv3).style.display = 'none';
      }
    }
    visibleDiv3 = elementid3;
  } else {
    document.getElementById(elementid3).style.display = 'none';
  }
}

visibleDiv4 = "";
function showHide4(elementid4,qstring){
  if (document.getElementById(elementid4).style.display == 'none'){
    document.getElementById(elementid4).style.display = '';
    if(visibleDiv4 != ""){
      if(visibleDiv4 != elementid4){
        document.getElementById(visibleDiv4).style.display = 'none';
      }
    }
    visibleDiv4 = elementid4;
  } else {
    document.getElementById(elementid4).style.display = 'none';
  }
}
</script>

And basically what I want to do is to get ShowHide1 to also hide visibleDiv2,3,4 when I click the button associated with the function. ShowHide2 to hide 3,4 and ShowHide3 to hide 4. Because I have page content inside each of the divs that I don’t want to display when the parent div is open.

Can anyone give me a hand?

Thanks!

Answer 1

yeah i can help try this

<input type="button" value="one" id="show_1" onclick="hideShow(this)"> 

Note each of you buttons id's for example need to have a digit at the end

show_1,

show_2 …..

.

 var arr_divids = ['div_1','div_2','div_3','div_4']; // ids for each of the content to be shown in 

 function hideShow(oWhich){
   for (var i =1; i < arr_divids.length+1; i++) {
     document.getElementById(arr_divids[i-1]).style.display = (i == (oWhich.id).slice(-1)) ? "block" : "none";
    }
  }