O código abaixo é para mostrar e esconder o conteúdo de uma div
.
Estou tentando usar ele para mostra alguns vídeos, porém não consigo fazer ele mostrar mais que 2 vídeos.
Veja o código:
Html
<button id="opt1">Option 1</button>
<button id="opt2">Option 2</button>
<div class="yesDisplay">
<p>Video 01</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="noDisplay">
<p>Video 02</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
CSS
.noDisplay{display:none;}
.yesDisplay{display:block;}
SCRIPT
$('#opt1').click(function(){
$('.yesDisplay').show();
$('.noDisplay').hide();
});
$('#opt2').click(function(){
$('.yesDisplay').hide();
$('.noDisplay').show();
});
Eu gostaria de mostrar até 8 vídeos nele e ao clicar em um botão a outra se esconda. Se possível fazer isso com JavaScript.