do something if element hidden

Question

how can i check a if an element is visible or hidden with jquery and perform some action?

below given is my form related code,

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br>
Full name: <input type="text" name="fullname"><br>
DOB: <input type="text" name="dob">
Address: <input type="text" name="address">
</form>

i need to hide the full name text field when first name text field or last name text field is displaying.

:hidden, or :visible selectors http://api.jquery.com/category/selectors/visibility-filter-selectors/ — Evgeny Samsonov, Dec 25 '13 at 08:03

rajesh kakawat · Accepted Answer · 2013-12-25T08:22:52.603

7

try something like this

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

for your code

if($('input[name="firstname"], input[name="lastname"]').is(':visible')){
  $('input[name="fullname"]').hide();
}

REFERENCE

http://api.jquery.com/visible-selector/

edited Dec 25 '13 at 08:22

answered Dec 25 '13 at 08:10

rajesh kakawat

10,330
1
18
38

lasttname? It seems you copy pasted the typo :-) – Vishal Dec 25 '13 at 08:22
@Vishal solved it ... – rajesh kakawat Dec 25 '13 at 08:23

score 1 · Answer 2 · answered Dec 25 '13 at 08:10

1

if($('input[name="firstname"], input[name="lastname"]').is(':visible') === true)
    $('input[name="fullname"]').hide();

answered Dec 25 '13 at 08:10

Vishal

1,169
8
13

score 0 · Answer 3 · answered Dec 25 '13 at 08:04

0

you should change

<input type="text" name="fullname"> 
to 
<input type="hidden" name="fullname">

to make an input field hidden

answered Dec 25 '13 at 08:04

Priya jain

725
2
5
15

score 0 · Answer 4 · answered Dec 25 '13 at 08:05

0

this should work $(element).is(":visible")

answered Dec 25 '13 at 08:05

semirturgay

3,812
2
27
47

score 0 · Answer 5 · answered Dec 25 '13 at 08:16

I don't know the logic behind your question, but this demo should do the trick. DEMO

$(document).ready(function(){
if($('#firstname').is(':visible') || $('#lastname').is(':visible'))
    $('#fullname').parent().hide();

})

I added some parent divs to hide the text and the input on once. If you want you can wrap the text in label tag for more clearly output.

do something if element hidden

5 Answers5