HTML:

<div style="display:block">Text</div>
<div style="display:block">Text</div>
<div style="display:none">Text</div>
<div style="display:none">Text</div>
<div style="display:none">Text</div>

How do I find first invisible block and make it visible?

If there is no invisible block, do nothing.

HTML:

<div style="display:block">Text</div>
<div style="display:block">Text</div>
<div style="display:none">Text</div>
<div style="display:none">Text</div>
<div style="display:none">Text</div>

How do I find first invisible block and make it visible?

If there is no invisible block, do nothing.

• javascript
• jquery
• html
• css

3 Answers 3

$('div:hidden:first').show();

• div the element-selector^[docs]

• :hidden the hidden-selector^[docs]

• :first the first-selector^[docs]

Use this:

$('div:hidden:first').show();

jQuery has the :visible and :hidden selectors:

$('#wrapperContainer > div:hidden:first').show();

(Remend a wrapper container because if you just do 'div:hidden:first' it will get the first hidden div on the page, which probably isn't what you want)