Toggle visibility of two divs at once

Question

I am using the following code to toggle visibility of a div area:

 <script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
  e.style.display = 'none';
else
  e.style.display = 'block';
}
 </script>

To toggle it, I am using:

onclick="toggle_visibility('id_of_element_to_toggle');"

How can I toggle the visibility of 2 divs at once? I want to make them switch. The simpler the method the better.

MORE INFO:

I am not having an luck. Here is my code:

<a href="#id" onclick="toggle_visibility(['id', 'callgraph']);">Change Payment Method</a>

<script type="text/javascript">
   function toggle_visibility(id, callgraph) {  
   var e = document.getElementById(id);
   var e2 = document.getElementById(callgraph);
   if(e.style.display == 'block')                   
      e.style.display = 'none';             
      e2.style.display = 'block';
   else
      e.style.display = 'block';            
      e2.style.display = 'none';                    
}                                            
</script>

what 2 divs? you pass 1 id You can pass an array of id's to the function if thats what you mean — Dvir, Oct 03 '13 at 16:48
1) Try using a JS library such as JQuery 2) Avoid using `onclick` etc attributes, instead bind to the event dymanically (such as with `jQuery('div.collapsible').click(function(){})`) — deed02392, Oct 03 '13 at 16:48
I tried passing an array of IDs like so onclick="toggle_visibility('first-id');toggle_visibility('second-id')", it did not work. — Arringar1, Oct 03 '13 at 16:50
@deed02392: Why jQuery for this task when vanilla JS can do it? — Harry, Oct 03 '13 at 16:50
@Harry Merely provided as an example, hopefully for the user to consider the benefits in other applications — deed02392, Oct 03 '13 at 16:51
http://stackoverflow.com/questions/4936715/how-to-toggle-between-two-divs — Ciro Santilli OurBigBook.com, Oct 27 '14 at 14:21

score 2 · Answer 1 · answered Oct 03 '13 at 16:48

The crudest solution would be to run it twice .. (once for each id)

onclick="toggle_visibility('first-id');toggle_visibility('second-id')"

Another would be to pass an array of id values

<script type="text/javascript">
function toggle_visibility(ids) {
    for(i=0,len = ids.length; i < len; i++) {
        var e = document.getElementById(ids[i]);
        if(e.style.display == 'block')
            e.style.display = 'none';
        else
            e.style.display = 'block';
    }
}
 </script>

And call it like this

onclick="toggle_visibility(['first-id','second-id']);"

@Arringar1 it should work. Are your div elements nested in each other ? Please post your HTML as well — Gabriele Petrioli, Oct 03 '13 at 16:51

score 0 · Answer 2 · answered Oct 03 '13 at 16:49

can't you use same function but add the other id ?

     <script type="text/javascript">
    function toggle_visibility(id1,id2) {
    var e = document.getElementById(id1);
    var f = document.getElementById(id2);
    if(e.style.display == 'block'&& f.style.display == 'block')
{
      e.style.display = 'none';
      f.style.display = 'none';
}
    else
{
      e.style.display = 'block';
      f.style.display = 'block';
}
    }
     </script>

then

onclick="toggle_visibility('id_of_element_to_toggle1','id2');"

score 0 · Answer 3 · answered Oct 03 '13 at 16:50

By "make them switch" do you mean that hiding one always shows the other?

For starters, you'd need a reference to both elements when you call the function:

onclick="toggle_visibility('id_of_element_to_toggle', 'id_of_other_element');"

Then in your function it's just a matter of setting both of them:

function toggle_visibility(id1, id2) {
    var e1 = document.getElementById(id1);
    var e2 = document.getElementById(id2);
    if(e1.style.display == 'block')
        e1.style.display = 'none';
        e2.style.display = 'block';
    else
        e1.style.display = 'block';
        e2.style.display = 'none';
}

It's not terribly elegant, but should get the job done clearly and effectively. (With a potential added benefit that if by some other means the two elements get "out of sync" then this would re-sync them. Or a potential added bug of the same functionality, depending on how you look at it I suppose.)

score 0 · Answer 4 · answered Oct 03 '13 at 16:50

Not sure if this is exactly what you want, but I would suggest to you simply add an argument to your function to include another DIV element, i.e.:

<script type="text/javascript">
function toggle_visibility(id1, id2) {
var e1 = document.getElementById(id1);
var e2 = document.getElementById(id2);

if(e1.style.display == 'block')
  e1.style.display = 'none';
  e2.style.display = 'none';
else
  e1.style.display = 'block';
  e2.style.display = 'block';
}
 </script>

Hope it helps

Toggle visibility of two divs at once

4 Answers4