Shows and hides content in Div in list form

Asked

Viewed 59 times

-2

I’m trying to change this code so you can hide and show the content in list form.

At the moment 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>




  <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&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 contents inside the div:

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

appear in the display format and hide in list form.

javascript html div dropdown

  • Veja.http://answall.com/questions/64935/program-para-mostrare-esconder-em-javascript/64940#64940

  • 1

    Third question this week with the same problem, a researched before.

  • and also related to - Add Players in script code. As @Huskell has already said, it’s already the third question about the same thing. Do not duplicate questions, if the answers to your question were not exactly what you were looking for, try to be more specific in your questions, edit the question, but do not duplicate them (or in this case triple).

1 answer

0

Use this scrip to Hide the div , where this "test" you put the id of the div 

<script type="text/javascript">

                function mostra() {
                    if (document.getElementById('teste').style.display == 'block'){
                        document.getElementById('teste').style.display = 'none';
                    }else {document.getElementById('teste').style.display = 'block'}
                }

            </script>

and on the Button you place this event :

onclick="mostra('teste')"

Browser other questions tagged javascript html div dropdown

You are not signed in. Login or sign up in order to post.