toggle functions in jQuery

Question

I'm using the toggle function to show and hide content, it works well, the only problem I have is that when I place a video the video continues to play even when it is hidden, is there any way to stop playing the video when it is hidden

$(document).ready(function(){
    $("button").click(function(){             
        $("p").toggle();
    });
});



 <button>Toggle</button>

  <p>the video is displayed here</p>

What about pause the video when the button is pressed? check that stackoverflow.com/questions/4155329/… — Wilfredo P
– Wilfredo P, Commented Nov 10, 2015 at 20:51

void · Accepted Answer · 2015-11-10 20:53:49Z

1

You can do:

$(document).ready(function(){
$("button").click(function(){
    $("p").toggle();
    if (document.getElementById('myVideo').paused) 
      document.getElementById('myVideo').play();
    else 
      document.getElementById('myVideo').pause();
});
});

If video is paused, play it and if it is playing then pause it on the click.

answered Nov 10, 2015 at 20:53

void

36.8k10 gold badges72 silver badges111 bronze badges

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

1 Comment

Andrew Mairose Over a year ago

Good solution, but what if the video is paused by the user, then the user clicks the toggle button to hide the video? This solution would hide the video, but resume playing it.

Andrew Mairose · Accepted Answer · 2015-11-10 21:59:39Z

I think you would want to check if your wrapping p element is visible, using $("p").is(":visible").

If it is visible, pause the video using document.getElementById("yourVideoId").pause(), obviously replacing "yourVideoId" with whatever you have in the id attribute on your <video> tag. Then, after you do that, you can call .toggle() on your p element.

If it is not visible, and the user clicks your toggle button, I would imagine you would just want to show the video, and not resume playing it, as that might be a little jarring to the user. If you do want that functionality, however, just add document.getElementById("video").play() in the else block in the example below.

Here is a working example to demonstrate the functionality:

$(document).ready(function() {
    $("button").click(function() {
        var p = $("p");
        if (p.is(":visible")) {
          document.getElementById("video").pause();
          $(this).text("Show");
        } else {
          $(this).text("Hide");
        }
        p.toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<video id="video" controls width="40%"> 
  <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
</p>
<button>Hide</button>

Added width="40%" on the video so it fits in the snippet window.

Collectives™ on Stack Overflow

toggle functions in jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related