Toggle visibility property of div
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');
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';
}
}
According to the jQuery docs, calling toggle()
without parameters will toggle visibility.
$('#play-pause').click(function(){
$('#video-over').toggle();
});
http://jsfiddle.net/Q47ya/
Using jQuery:
$('#play-pause').click(function(){
if ( $('#video-over').css('visibility') == 'hidden' )
$('#video-over').css('visibility','visible');
else
$('#video-over').css('visibility','hidden');
});