Skip to content

Toggle visibility property of div

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="" type='video/mp4' />
    <source src="" type='video/webm' />
    <source src="" type='video/ogg' />

<button type="button" id="play-pause" onclick="showVid();">
      <img class="img-home-apply" src="/wp-content/images/apply-pic.png" alt="Apply Now">

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.



Using jQuery:

  if ( $('#video-over').css('visibility') == 'hidden' )
User contributions licensed under: CC BY-SA
10 People found this is helpful