CODEWITHSUNDEEP
jquery
Miha Šušteršič
Miha Šušteršič

Reputation: 10042

Checking for status of jquery hide and show

I have a simple function:

expandContact = () => {
    $('#' + this.props.id).find('.ekipa-li-expand').show();
  }

Now I would like to write a condition that checks if the element is visible or not (I would like to hide the element on click if it's shown, and show it if it's hidedn.

Far as I can tell the .show() function just adds style="display: block;" to the DOM element. But how do I check for this in a condition with javascript?

Upvotes: 0

Views: 129

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You don't need to write any condition, you can just use toggle():

expandContact = () => {
  $('#' + this.props.id).find('.ekipa-li-expand').toggle();
}

For reference, if, for whatever reason, you did need to know the visible state of an element you can use the is() method with the :visible selector:

if ($('#' + this.props.id).find('.ekipa-li-expand').is(':visible')) {
  // do something...
}

Upvotes: 4

Related Questions