Скрыть и показать несколько divs одним щелчком мыши

Question

Я пытаюсь скрыть и показать два divs одним щелчком мыши.

<a href="javascript:showhide('bbb','ccc4')"> 
    you click here to see two div contents </a>sddsds<br /> 
</a> 

Я смог только скрыть и показать один div. Когда я пытаюсь скрыть и показать два div, используя ID, я не могу. Я пробовал другие предложения, но они не работают.

<a href="javascript:showhide('bbb','ccc4')"> 
    you click here to see two div contents </a>sddsds<br /> 
</a> 

<div target='ccc4' name='ccc4' id='ccc4' frameborder='0'onload='setIframeHeight(this.id)' style='display:none;' ' > ddfddddd 

    <iframe class='shark' src='imagehugeblow.php?midd=<?=$row5['mid'] ?>ccc' target='ccc' name='ccc' id='ccc' frameborder='0'onload='setIframeHeight(this.id)'  style='display:none;'    ></iframe> 

</div> <div target='bbb' name='bbb' id='bbb' frameborder='0'onload='setIframeHeight(this.id)' style='display:none;' ' > sdds 

    <iframe class='shark' src='imagehugeblow.php?midd=<?=$row5['mid'] ?>ccc' target='bbb' name='bbb' id='bbb' frameborder='0'onload='setIframeHeight(this.id)'  style='display:none;'    ></iframe> 

</div> 
<script type="text/javascript"> 
    function showhide(id) { 
    var e = document.getElementById(id); 
    e.style.display = (e.style.display == 'block') ? 'none' : 'block'; 
    } 
</script> 

Я пробовал использовать Javascript ниже, но он тоже не работает.

Есть ли способ скрыть более одного div одним щелчком мыши, или я должен использовать класс вместо использования идентификатора?

Answer 1

function showhide(id) { 
    var e = document.getElementById(id); 
    e.style.display = (e.style.display == 'block') ? 'none' : 'block'; 
} 

Здесь вы имеете дело только с одним ID.

Rewirite ваша функция, чтобы скрыть два ID. Нечто подобное:

function showhide(id1, id2) { 
    var e = document.getElementById(id1); 
    e.style.display = (e.style.display == 'block') ? 'none' : 'block'; 
    e = document.getElementById(id2); 
    e.style.display = (e.style.display == 'block') ? 'none' : 'block'; 
} 

Чтобы уменьшить использование репликации кода массива для хранения идентификаторов:

function showhide(ids) { 
    for (var i = 0; i < ids.length; i++) { 
     var e = document.getElementById(ids[i]); 
     e.style.display = (e.style.display == 'block') ? 'none' : 'block'; 
    } 
} 

И называют это:

showhide(['bbb', 'ccc4']) 

Или вы можете использовать arguments:

function showhide() { 
    for (var i = 0; i < arguments.length; i++) { 
     var e = document.getElementById(arguments[i]); 
     e.style.display = (e.style.display == 'block') ? 'none' : 'block'; 
    } 
} 

В этом случае c все должно быть:

showhide('bbb', 'ccc4') 

Answer 2

Добавить каждый Div вы хотите, чтобы переключить дисплей в качестве отдельного параметра:

<a href="javascript:showhide('bbb', 'ccc4')"> 

Затем измените JS, чтобы включить цикл по массиву аргументов:

<script type="text/javascript"> 
    function showhide() { 
    for(var i = 0; i < arguments.length; i++){ 
     var e = document.getElementById(arguments[i]); 
     e.style.display = (e.style.display == 'block') ? 'none' : 'block'; 
    } 
    } 
</script> 

Answer 3

My version

window.onload=function() { 
 
    document.getElementById("ccc4").style.display="none"; 
 
    document.getElementById("bbb").style.display="none"; 
 
    document.getElementById("toggle").onclick=function() { 
 
    var divs = this.getAttribute("data-divs").split(","); 
 
    
 
    for(var i = 0,len = divs.length;i < len;i++){ 
 
     var e = document.getElementById(divs[i]).style; 
 
     console.log(e.display) 
 
     e.display = (e.display == "") ? "none" : ""; 
 
    } 
 
    return false; 
 
    } 
 
}

<a href="turnonjs.html" id="toggle" data-divs="ccc4,bbb"> 
 
    you click here to see two div contents </a> 
 

 

 
<div target='ccc4' name='ccc4' id='ccc4'>div 1</div> 
 
<div target='bbb' name='bbb' id='bbb'> div 2</div>

Или дать обе дивы тот же класс и использовать document.querySelectorAll(".classname")

Answer 4

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 

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

<a onclick="toggle_visibility('div-to-hide');"> 

<div id="div-to-hide" class="div-to-hide"> 
---- content here --- 
</div>