Estou tentando altera esse codigo para que possa esconde e mostra o conteudo em forma de lista.
No momento o codigo mostra o conteudo em videos através da sua 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>
<script type="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&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>
Gostaria de altera-lo para que o conteudo que esteja dentro da div:
<div class="video">
Conteudo
</div>
apareça no formato mostra e esconde em forma de lista.