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?
This question is related to
javascript
jquery
html
css
checkbox
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'));_x000D_
console.log($('#visibleDiv').is(':visible'));#selectDiv {_x000D_
display: none; _x000D_
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id="selectDiv"></div>_x000D_
<div id="visibleDiv"></div>Source: Stackoverflow.com