Hide all other divs after the 5th div

I am trying to hide the divs after photo info 5. Not sure if the script below is executing it correctly or not. If anyone could give me any guidance that would be great.


$( ":nth-of-type(5)" ).nextAll( ".photo-info" ).addClass( "hidden" );


<div class="photo-info">1</div>
<div class="photo-info">2</div>
<div class="photo-info">3</div>
<div class="photo-info">4</div>
<div class="photo-info">5</div>
<div class="photo-info">6</div>
<div class="photo-info">7</div>


Your script is working based on the code you provided.

Given that they are all sibling elements, you could do this with pure CSS by making use of the general sibling combinator, ~:

Example Here

.photo-info:nth-of-type(5) ~ .photo-info {
  display: none;

Alternatively, you could also use .eq(4) (0 index based):

Updated Example


You could also use :gt(4):

Updated Example


For what it’s worth, you may need to wrap your jQuery in a DOM ready handler:

$(document).ready(function () {