Toggle visibility property of div

css, javascript, jquery, show-hide, toggle

Solution

Using jQuery:

$('#play-pause').click(function(){
  if ( $('#video-over').css('visibility') == 'hidden' )
    $('#video-over').css('visibility','visible');
  else
    $('#video-over').css('visibility','hidden');
});

Problem

I have an HTML 5 video in a div. I then have a custom play button - that works fine. And I have the video's visibility set to hidden on load and visible when the play button is clicked, how do I return it to hidden when the play button is clicked again? ``` function showVid() { document.getElementById('video-over').style.visibility = 'visible'; } ``` ``` #video-over { visibility: hidden; background-color: rgba(0, 0, 0, .7) } ``` ``` <div id="video-over"> <video class="home-banner" id="video" controls=""> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /> <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' /> </video> </div> <button type="button" id="play-pause" onclick="showVid();"> <img class="img-home-apply" src="/wp-content/images/apply-pic.png" alt="Apply Now"> </button> ``` I'm basically just trying to toggle it between the two states of visible and hidden except I can't use toggle because that show's and hides the div. I need it there, just hidden, so it maintains the correct height.

Original source