Shows and hides content in list form. with Div and Javascript

Asked

Viewed 411 times

0

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

But I can’t make it work.

You can get access to it running here: http://jsfiddle.net/hwr600kn/6/

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

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;
}
javascript html div

  • Possible duplicate of - Add Players in script code and a few others you’ve posted.

  • 1

    I marked it as duplicate because the question has practically the same title and goal. Please, if you need to discuss any details of the code you copied from the answer, please add a comment to the answer to the other question.

1 answer

0

Greetings! Here are some tips: try not to use spacing on HTML identifier attributes.

Some changes in HTML as you can see (load the DOM as display:None so that the Divs are initially hidden and the change in the ids):

<div id="videoGallery">
   <ul>
     <li><span class="vid" data-videoID="Video01">Video 1</span></li>
     <li><span class="vid" data-videoID="Video02">Video 2</span></li>
     <li><span class="vid" data-videoID="Video03">Video 3</span></li>
     <li><span class="vid" data-videoID="Video04">Video 4</span></li>
     <li><span id="close">Fechar Tudo</span></li>
  </ul>
</div>

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

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

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

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

Change in the jQuery:

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

buttons.click(function(){
    var videoID = $(this).attr('data-videoID');
    var videos = $("#"+videoID);
    $("div[id^='Video']").hide().slideUp("fast");
    $('.nowPlaying').remove();
    videos.show().slideDown("fast");
    $('<span class="nowPlaying">▼ Reproduzindo ...</span>').insertAfter(this);
    $('html, body').animate({
        scrollTop: (videos.offset().top-liHeight)
    }, 200);
});

$('#close').click(function(){
	$('.nowPlaying').remove();
    $("div[id^='Video']").hide().slideUp("fast");
});

Browser other questions tagged javascript html div

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