Show and hide Div content in list form [duplicate]

I'm trying to change this code so it can hide and display the content in list form.

Currently the code shows the content in videos through your id.

  <div id="videoGallery">
  <ul>
  <li><span class="vid" data-videoID="">Video 1</span></li>
  <li><span class="vid" data-videoID="">Video 2</span></li>
  <li><span class="vid" data-videoID="">Video 3</span></li>

  <li><span id="close">Fechar Tudo</span></li>
  </ul>



  <style>
  #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;
}
</style>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><scripttype="text/javascript">
  var buttons = $('#videoGallery .vid');
  var liHeight = $('#videoGallery li').height();

   buttons.click(function(){
  var videoID = $(this).attr('data-videoID');
  var videos = $('<div id="meuVideo"> <iframe width="560" height="315" src="www.youtube.com/embed/'+ videoID +'?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </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();
});
</script>

I would like to change it so that the content that is inside the div:

    <div class="video">
      Conteudo
     </div>

appears in show format and hides in list form.