Toggle visibility property of div

Question

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.

score 87 · Accepted Answer · answered Aug 05 '13 at 04:52

87

Using jQuery:

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

answered Aug 05 '13 at 04:52

tb11

3,056
21
29

1

thank you... I just wasted a half hour of my life. my head just automatically went to "onclick" because I was working with a button. I really appreciate it! @tb11 – tfer77 Aug 05 '13 at 04:56
You can use `onclick`. You just need to put the toggling logic inside the `showVid()` function. Well, then it would be a `toggleVid()` function. – tb11 Aug 05 '13 at 04:59
12

$('#video-over').css('visibility', $('#video-over').css('visibility') == 'hidden' ? 'visible' : 'hidden'); – Antti May 07 '14 at 06:14
Just for future reference Visibility and Display work differently. Display applies hierarchically to inner divs, while visibility in some cases does not. Here is the same for display: `$('#ivideo-over').css('display', $('#ivideo-over').css('display') == 'none' ? 'block' : 'none');` – Lisandro Mar 19 '16 at 15:10
Great answer but I also recommend the use of the display property with none/block as the options. visibilities will 'reserve' the space for the div, depending on your UI that will likely not look all that great. The display property treats it as if it doesn't exist so your UI isn't effected until... it does.. – Tarquin Jan 12 '22 at 00:12

score 37 · Answer 2 · edited Jul 05 '20 at 10:55

37

According to the jQuery docs, calling toggle() without parameters will toggle visibility.

$('#play-pause').click(function(){
   $('#video-over').toggle();
});

http://jsfiddle.net/Q47ya/

edited Jul 05 '20 at 10:55

The Codesee

3,714
5
38
78

answered Feb 17 '14 at 20:57

timetraveler

544
4
6

55

note the difference between the css properties 'visibility' and 'display'. 'toggle()' changes the 'display' property which will hide the element and makes the space "available" for other elements whereas with 'visibility' the element keeps occupying space. as the OP states in the last sentence, that's why 'toggle()' won't work here – Mallard Mar 11 '14 at 14:57
3

"According to the jquery docs calling toggle() without parameters will toggle visibility." No It doesn't. visibility and display are two different things and toggle works on display, not visibility. – Abdul Rehman Feb 20 '17 at 13:38
if you want to manipulate server side content `display :none ` is not an option toggle() will not work – safhac Dec 11 '18 at 15:40

score 2 · Answer 3 · edited Apr 02 '17 at 06:54

There is another way of doing this with just JavaScript. All you have to do is toggle the visibility based on the current state of the DIV's visibility in CSS.

Example:

function toggleVideo() {
     var e = document.getElementById('video-over');

     if(e.style.visibility == 'visible') {
          e.style.visibility = 'hidden';
     } else if(e.style.visibility == 'hidden') {
          e.style.visibility = 'visible';
     }
}

score 1 · Answer 4 · answered Feb 18 '19 at 01:38

To clean this up a little bit and maintain a single line of code (like you would with a toggle()), you can use a ternary operator so your code winds up looking like this (also using jQuery):

$('#video-over').css('visibility', $('#video-over').css('visibility') == 'hidden' ? 'visible' : 'hidden');

davefrassoni · Answer 5 · 2019-05-11T02:38:10.517

0

To do it with an effect like with $.fadeIn() and $.fadeOut() you can use transitions

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}

edited May 11 '19 at 02:38

answered May 11 '19 at 02:06

davefrassoni

306
2
5

score 0 · Answer 6 · answered Sep 24 '20 at 14:29

0

It's better if you check visibility like this: if($('#video-over').is(':visible'))

answered Sep 24 '20 at 14:29

Paul Iştoan

61
1
4

score 0 · Answer 7 · answered Jan 04 '22 at 08:55

$.fn.toggleVisibility = function (state) {
    return this.each(function () {
        $(this).css("visibility", state ? "visible" :
            (state === false ? "hidden" :
                $(this).css("visibility") === "hidden" ? "visible" : "hidden"));
    });
};

Then

$('#video-over').toggleVisibility();

or

$('#video-over').toggleVisibility(true);

or

$('#video-over').toggleVisibility(false);

Toggle visibility property of div

7 Answers7

Linked

Related