JQuery: if div is visible

Question

I'm using JS as a way of changing the content of an SPA I'm creating. When I press a button to change the content the HTML changes from this:

<div id="selectDiv" style="display: none;">

to this:

<div id="selectDiv" style>

Now part of my SPA has a div that contains a number of checkboxes, each representing a div, and so when I press the submit button, the next div that should be displayed will be the first item in the checkbox list that was selected.

I'm wondering if there's a way in JQuery for the code to "almost detect" which div is now visible. something like this:

if($('#selectDiv').isVisible()){
    //JS code associated with this div.
}

Any suggestions?

Could you not mess around with the `.hasClass` function to do something like this? Check if an element has a certain class and then go from there? — Andy Holmes, Nov 07 '16 at 15:40
`if(document.getElementById("selectDiv").style.display !== "none"){...}` — Scott Marcus, Nov 07 '16 at 15:41
What do you mean by "almost detect"? You could use $elem.is(":visible") to determine is the element is visible! — Gacci, Nov 07 '16 at 15:42

Mosh Feu · Accepted Answer · 2016-11-07T15:49:43.730

124

You can use .is(':visible')

Selects all elements that are visible.

For example:

if($('#selectDiv').is(':visible')){

Also, you can get the div which is visible by:

$('div:visible').callYourFunction();

Live example:

console.log($('#selectDiv').is(':visible'));
console.log($('#visibleDiv').is(':visible'));

#selectDiv {
  display: none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectDiv"></div>
<div id="visibleDiv"></div>

edited Nov 07 '16 at 15:49

answered Nov 07 '16 at 15:41

Mosh Feu

24,625
12
74
111

2

Hey there - not disputing the correctness of this answer, but please consider suggesting or voting on a dupe for questions like these. There are already some pretty comprehensive answers that exist on Stack Overflow that we can point this question to instead. – Serlite Nov 07 '16 at 15:44
Could I do something like this? $(document).ready(function () { if ($('#selectDiv').is(':visible')) { //JS code associated with this div. } }); – Mark Nov 07 '16 at 15:46
Yes, see my update. – Mosh Feu Nov 07 '16 at 15:49
@JacksonSentzke any thoughts? – Mosh Feu Nov 07 '16 at 16:20
It runs in the code snippet, but it's not running in my code. It's now just trial and error to get it working. – Mark Nov 07 '16 at 16:26
@MoshFeu function visible() { if ($('#selectDiv ').is(':visible')) { $('#selectDiv ').append("
Test
"); } } I have the code wrapped in a function, I then just call the function. – Mark Nov 07 '16 at 16:31
If it's a question, the answer is yes. You can do that. – Mosh Feu Nov 07 '16 at 17:12
thank, it's work for me. – Ashiquzzaman Apr 14 '17 at 05:35
@Md. Ashiquzzaman glad to hear :) – Mosh Feu Apr 15 '17 at 18:06

JQuery: if div is visible

1 Answers1

Linked