javascript toggle to show/hide div

Question

I have a javascript toggle function:

<script type="text/javascript"> 
    function toggle(layer) {
    var d = document.getElementById(layer);
    d.style.display = (d.style.display == 'none') ? '' : 'none';
    }
    </script>

What this does is:

I have a few links on page and on click of these links it shows / hides the respective DIV section associated with it..

In the following two links it opens and closes div section named stusearch & facsearch

<a href="javascript:toggle('stusearch')" ><b>Student Manager</b></a>
<a href="javascript:toggle('facsearch')" ><b>Faculty Manager</b></a>

This works well except that, i would like to hide the previous shown toggle when a new toggle link is clicked, at the moment the previous one remains open, and the new one opens up below it.

Answer 1

I tweaked your code a bit here . I ended up adding a variable to store the divs you want to show/hide in case you want to add more divs to toggle:

var divs = [ "stusearch", "facsearch" ];
function toggle(layer) {
    var d
    for(var i = 0; i < divs.length; i += 1) {
        d = document.getElementById(divs[i]);
        d.style.display = 'none';
    }
    d = document.getElementById(layer);
    d.style.display = '';
}

Answer 2

<script type="text/javascript"> 
function toggle(layer) {
var d = document.getElementById(layer);
d.style.visibility = (d.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
</script>

Answer 3

In pure javascript, the easiest way is going to be to just 'remember' the last element you modified - aka:

var lastElement = null;

function toggle(elementId)
{
    if(lastElement != null)
        lastElement.style.display = 'none';

    var newElement = document.getElementById(elementId);

    newElement.style.display = (newElement.style.display == 'none') ? 'visible' : 'none';

    if(newElement != lastElement)
       lastElement = newElement;
}

You hide the last reference, then get the new one and show it.

Answer 4

You could keep a local var to it,

<script type="text/javascript">
  function(){ 
   var shown;
   window.toggle = function(layer) {
     if(shown)
        shown.style.display = '';
     var d = document.getElementById(layer);
     d.style.display = (d.style.display == 'none') ? '' : 'none';
     shown = d;
   }
  }
</script>

Alternatively, you could control the visibility with a css class and do a blanket removel of the class from all elements before setting it.

Answer 5

Here is a jQuery solution in case you ever decide to implement a library:

the JavaScript:

function toggle(layer) {
    $('.toggleableSearch').hide();
    $(layer).show();
}

the html:

<a href="javascript:toggle('stusearch')" ><b>Student Manager</b></a>
<a href="javascript:toggle('facsearch')" ><b>Faculty Manager</b></a>

<div id="stusearch" class="toggleableSearch"></div>
<div id="facsearch" class="toggleableSearch"></div>