Question

28

Toggle visibility property of div

rated 0 times [ 35] [ 7] / answers: 1 / hits: 124984 / 11 Years ago, mon, august 5, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cartersinceren

Add To Favorites

Follow

Total Points: 442

Total Questions: 116

Total Answers: 106

Location: San Marino

Member since Thu, Jun 30, 2022

2 Years ago

answered 11 Years ago hallie · Accepted Answer

Using jQuery:

$('#play-pause').click(function(){

  if ( $('#video-over').css('visibility') == 'hidden' )

    $('#video-over').css('visibility','visible');

  else

    $('#video-over').css('visibility','hidden');

});