Show and hide Div with Java Script

Question

The code below is to show and hide the contents of a div.

I’m trying to use it to show some videos, but I can’t get it to show more than 2 videos.

See the code:

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&amp;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&amp;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();
}); 

I would like to show up to 8 videos on it and when clicking a button the other one hides. If possible do this with Javascript.

Answer 1

You have to program HTML and Javascript to be scalable. In other words, they work no matter how many videos you have. One way to do it would be like this:

var buttons = $('#videoGallery button');
var videos = $('#videoGallery div');

buttons.on('click', function () {
    var index = buttons.get().indexOf(this);
    videos.removeClass('yesDisplay');
    videos.eq(index).addClass('yesDisplay');
});

jsFiddle: http://jsfiddle.net/qhe7gfd3/

This code assumes you have all the button and div > iframe within a wrapper #videoGallery and that all of these div are hidden. That is, you don’t need the class noDisplay. And then you just add and remove classes. No .show() and .hide().