Toggle visibility property of div

javascript jquery css toggle show-hide
tfer77 picture tfer77 · Aug 5, 2013 · Viewed 107.5k times · Source

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?

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.

Answer

tb11 picture tb11 · Aug 5, 2013

Using jQuery:

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

Related questions

How do I make a <span> element a regular tab stop within a form?

I made a form control which uses as its container (see the Yes/No toggler below) Here's the code for that: <span class="toggle"> <i>Yes</i> <i>No</i> &…

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More