I have the following code, for enabling a div from toggling between visible and hidden:

function toggle_visibility(id,$this) {
  var e = document.getElementById(id);
   if(e.style.display == 'block')
   {
     e.style.display = 'none';
   }
   else
   {
     e.style.display = 'block';
   }
}

Basically when I click a link that has onclick="toggle_visibility('4s'); within it then the specified div is shown and then when you click again it is hidden.

My problem is when the same code is use for multiple links, and you toggle the visibility of one and then the other, the previous one is still shown. How would I go about only enabling one div to be shown when toggled and then if another is toggled the other is hidden?

I have the following code, for enabling a div from toggling between visible and hidden:

function toggle_visibility(id,$this) {
  var e = document.getElementById(id);
   if(e.style.display == 'block')
   {
     e.style.display = 'none';
   }
   else
   {
     e.style.display = 'block';
   }
}

Basically when I click a link that has onclick="toggle_visibility('4s'); within it then the specified div is shown and then when you click again it is hidden.

My problem is when the same code is use for multiple links, and you toggle the visibility of one and then the other, the previous one is still shown. How would I go about only enabling one div to be shown when toggled and then if another is toggled the other is hidden?

• javascript
• css

• please give us HTML also – Wasim Karani Commented Oct 12, 2011 at 16:34
• 1 Either store the id of the previous div and hide that when the function is next called, or just blanket hide all divs before showing the current one. – geekchic Commented Oct 12, 2011 at 16:35

3 Answers 3

Keep a global variable for the div which is currently visible and make it invisible when you make any div visible.

var previousVisibleElement;
function toggle_visibility(id,$this) {
  var e = document.getElementById(id);
  if(e.style.display == 'block')
   {
     e.style.display = 'none';
  }
  else
  {
     if(previousVisibleElement !=null)
          previousVisibleElement.style.display='none';
     e.style.display = 'block';
    previousVisibleElement=e;

  }
}

Here is a generic example using jquery.

Markup

<section>
    <div id="1">one</div>
    <div id="2">two</div>
    <div id="3">three</div>
    <div id="4">four</div>
</section>
<a href="#1">one</a>
<a href="#2">two</a>
<a href="#3">three</a>
<a href="#4">four</a>

JS

var divs = $('section div'),
    links = $('a');

links.click(function(){
    $(this.hash).toggle().siblings().hide();
    return false;
});

if you provide the current script in a jsfiddle people would be able to answer better.

here is a small sample i did using jquery. hide using jquery toggle