Переключить видимость двух див сразу

Question

Я использую следующий код, чтобы переключить видимость области сНу:

<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> 

Для переключения его, я использую:

onclick="toggle_visibility('id_of_element_to_toggle');" 

Как переключить видимость сразу 2 divs? Я хочу, чтобы они переключались. Чем проще метод, тем лучше.

ДОПОЛНИТЕЛЬНО:

Я не имея удачи. Вот мой код:

<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> 

Answer 1

грубейшее решение было бы запустить его в два раза .. (один раз для каждого id)

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

---

Еще бы передать массив идентификатора значения

<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> 

И назовите это так

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

Answer 2

Вы не можете использовать ту же функцию, но добавить другой идентификатор?

 <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> 

затем

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

Answer 3

Под «заставить их переключиться» вы имеете в виду, что скрывается один всегда показывает другой?

Для начала, вам нужна ссылка на обоих элементах при вызове функции:

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

Тогда в функции это просто вопрос установки обоих из них:

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'; 
} 

Это не очень элегантно, но должно выполнять работу четко и эффективно. (С потенциальной добавленной выгодой, которая, если каким-либо другим способом эти два элемента получат «не синхронизированный», то это приведет к их повторной синхронизации. Или потенциальная добавленная ошибка одной и той же функциональности, в зависимости от того, как вы смотрите на нее, я полагаю.)

Answer 4

Не уверены, что это именно то, что вы хотите, но я хотел бы предложить вам просто добавить аргумент в вашу функцию, чтобы включить другой DIV элемент, то есть:

<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> 

Надеется, что это помогает