-1

Hope someone can help me on this.

What I'm trying to do is when the .video-play is clicked, it will hide the .video-link div then show the .video-container div.

Then when the .video-close is clicked, it will hide the .video-container and show again the .video-link div.

Just to clarify, the div.wrap and everything under it including .video-close is only added via jquery when .video-play is clicked.

<div class="video-link">
  <a class="video-play" href="#">Play Video</a>
</div>

<div class="video-container">
  <!-- This part is added by a jquery script when .video-play is clicked -->
  <div class="wrap">
   <div class="content">
    <span class="video-close"></span>
   </div>
  </div>
  <!-- / end added part -->
</div>
creativemix
  • 23
  • 3
  • 2
    You can find your answer easily by searching on web. – Mohammad Jun 26 '16 at 15:06
  • I have searched but I didn't find the exact function I'm looking for. – creativemix Jun 26 '16 at 15:08
  • Certainly there is no exact answer for it. You need find your answer from multiple answer. However use [**this**](https://jsfiddle.net/94a3obrp/) – Mohammad Jun 26 '16 at 15:14
  • I have edited my OG post. The jquery (both answers of Mohammad and Mosh Feu can't seem to work if the .video-close is added by another jquery script after the page is loaded. Is there a solution to that? – creativemix Jun 26 '16 at 16:14

1 Answers1

3

I assume that once you will read that code, you will understand..

$(document).on('click', '.video-play,.video-close', function(e) {
  e.preventDefault();
  $('.video-link, .video-container').toggle();
});
.video-container {
  display:none;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-link">
  <a class="video-play" href="#">Play Video</a>
</div>

<div class="video-container">
  <a class="video-close" href="#">Close</a>
</div>
Mosh Feu
  • 28,354
  • 16
  • 88
  • 135