Show and hide content in list form. with Div and Javascript [duplicate]

I'm trying to edit this code that is almost finished, its function is to show and hide a certain content that is within a div .

But I can not get it to work.

You can get access to it working here: link

Use the menu to perform the show / hide function. See that the content is not hidden as it should be.

HTML:

<div id="videoGallery">
  <ul>
    <li><span class="vid" data-videoID="Video 01">Video 1</span></li>
    <li><span class="vid" data-videoID="Video 02">Video 2</span></li>
    <li><span class="vid" data-videoID="Video 03">Video 3</span></li>
    <li><span class="vid" data-videoID="Video 04">Video 4</span></li>
    <li><span id="close">Fechar Tudo</span></li>
  </ul>
</div>

<div id="Video 01">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?controls=0&amp;showinfo=0"frameborder="0" allowfullscreen></iframe>
</div>

<div id="Video 02">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?controls=0&amp;showinfo=0"frameborder="0" allowfullscreen></iframe>
</div>

<div id="Video 03">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?controls=0&amp;showinfo=0"frameborder="0" allowfullscreen></iframe>
</div>

<div id="Video 04">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?controls=0&amp;showinfo=0"frameborder="0" allowfullscreen></iframe>
</div>

Javascript:

var buttons = $('#videoGallery .vid');
var liHeight = $('#videoGallery li').height();

buttons.click(function() {
  var videoID = $(this).attr('data-videoID');
  var videos = $('<div id="meuVideo">  </div>');

  $('#meuVideo, .nowPlaying').remove();
  videos.insertAfter(this).hide().slideDown("fast");
  $('<span class="nowPlaying">▼ Reproduzindo ...</span>').insertAfter(this);
  $('html, body').animate({
    scrollTop: (videos.offset().top - liHeight)
  }, 200);
});

$('#close').click(function() {
  $('#meuVideo, .nowPlaying').remove();
});

Css:

#videoGallery ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#videoGallery span {
  display: block;
  background-color: steelblue;
  color: #fff;
  font-family: sans-serif;
  cursor: pointer;
  padding: 4px 10px;
  border-bottom: 1px solid #fff;
}

#videoGallery li {
  position: relative;
}

span.nowPlaying {
  position: absolute;
  top: 0;
  right: 0;
}