Скрыть несколько divs onclick

Question

Пытается скрыть все видимые divs и переключить один щелчок одной кнопки.

<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 class="stream" style="display:none"> 
<center> 
<iframe src="http://www.twitch.tv/g4ivl3_0v3r/embed" frameborder="0" scrolling="yes" height="700px" width="65%"></iframe> 
<br> 
<iframe src="http://www.twitch.tv/g4ivl3_0v3r/chat?popout=" frameborder="0" scrolling="yes" height="300" width="65%"></iframe> 
</center> 
</div> 

под тумблера:

<img src="images/twitch.png" 
    width="20%" height="20%" border="0" onclick="toggle_visibility('stream')"> 

Так что я просто интересно, если с тем, что я в настоящее время работая с может скрыть все остальные div на странице и переключить только один или два. В настоящий момент это прекрасно работает при перемещении моего стола вниз и показе div, который я хочу, но в конце Id хотел бы скрыть все, кроме потока div.

Кроме того, я как бы новичок в этом, так как я уверен, что вы можете сказать, но я пытаюсь узнать, что смогу. Буду признателен за любую оказанную помощь.

Answer 1

Try ...

$("div:visible").hide(); 

... чтобы скрыть все видимые DIVs. Затем включите один, который не должен быть скрытым ...

$(".stream").show(); 

Answer 2

вы можете просто сделать это:

$('div').hide();// hide all divs 

$("#stream").show();// here show the div with id stream 

, если вы хотите, чтобы показать все DIV с классом strean использовать ниже.

$(".stream").show();// here show the div with class stream 

Answer 3

$(document).ready(function(){ 
    $("#button_id").click(function(){ 
    $('div').hide(); //this will hide all the div(s) firstly 
    $("#stream").show(); 
    }); 
}); 

Answer 4

Попробуйте

$(document).ready(function(){ 
    $("#selector").click(function(){ 
    $('div').hide(); //this will hide all the div 
    $("#stream").show(); 
    }); 
}); 

Answer 5

Если вы действительно не хотите использовать JQuery, попробуйте:

function toggle(elem, collection) { 
    var shown = (elem.style.display === 'block'); 

    for (i = 0; i < collection.length; i++) { 
     if (!shown) { 
      collection[i].style.display = 'none'; 
     } else { 
      collection[i].style.display = ''; 
     } 
    } 

    if (shown) { 
     elem.style.display = ''; 
    } else { 
     elem.style.display = 'block'; 
    } 
} 

toggle(document.getElementById('stream'), document.getElementsByTagName('div')); 

Предполагая #stream установлен в display: none; с использованием CSS inst ead встроенного стиля. В противном случае измените '' на 'none'.