[javascript] Detect if an element is visible with jQuery

Using .fadeIn() and .fadeOut(), I have been hiding/showing an element on my page, but with two buttons, one for hide and one for show. I now want to have one button to toggle both.

My HTML / JavaScript as it is:

<a onclick="showTestElement()">Show</a>
<a onclick="hideTestElement()">Hide</a>
function showTestElement() {
  $('#testElement').fadeIn('fast');
}

function hideTestElement() {
  $('#testElement').fadeOut('fast');
}

My HTML / JavaScript as I would like to have it:

<a onclick="toggleTestElement()">Show/Hide</a>
function toggleTestElement() {
  if (document.getElementById('testElement').***IS_VISIBLE***) {
    $('#testElement').fadeOut('fast');
  } else {
    $('#testElement').fadeIn('fast');
  }
}

How do I detect if the element is visible or not?

This question is related to javascript jquery

The answer is


There's no need, just use fadeToggle() on the element:

$('#testElement').fadeToggle('fast');

Here's a demo.


if($('#testElement').is(':visible')){
    //what you want to do when is visible
}