Simple jQuery show/hide div alternating

Question

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>

I have searched but I didn't find the exact function I'm looking for. — creativemix
– creativemix, Commented Jun 26, 2016 at 15:08
Certainly there is no exact answer for it. You need find your answer from multiple answer. However use this — Mohammad
– Mohammad, Commented Jun 26, 2016 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
– creativemix, Commented Jun 26, 2016 at 16:14

Mosh Feu · Accepted Answer · 2016-06-26 16:38:17Z

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>

edited Jun 26, 2016 at 16:38

answered Jun 26, 2016 at 15:11

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Alon Eitan Over a year ago

Your solution is cleaner than mine - So have an upvote

Mosh Feu Over a year ago

@creativemix, Have you see my answer?

creativemix Over a year ago

Thanks Mosh Feu! Will test it out.

creativemix Over a year ago

I have edited my OG post. The jquery (both answers of Mohammad & 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?

Mosh Feu Over a year ago

@creativemix In this case you should use on instead of click see my updated code. Read the question and answers: stackoverflow.com/q/10082031/863110

|

Collectives™ on Stack Overflow

Simple jQuery show/hide div alternating

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related