jquery - Issue with nth child height property -

this css code.

    .filtereddoccontent {       display: none;     }     .filtereddoccontent .photography:nth-child(1),     .filtereddoccontent .photography:nth-child(2),     .filtereddoccontent .photography:nth-child(3),     .filtereddoccontent .photography:nth-child(4),     .filtereddoccontent .photography:nth-child(5),     .filtereddoccontent .photography:nth-child(6),     .filtereddoccontent .photography:nth-child(7),     .filtereddoccontent .photography:nth-child(8) {       display: block;     } 

what here -

total 15 documents or more than(it come according user insert or upload data) there , show 1st 8 documents. take height of documents , button of load more appear.

this div when documents display:-

<div id="lightbox" class="row filtereddoccontent">     <?php foreach ( $adoc $odoc ) { ?>     <div class="col-sm-6 col-md-3 col-lg-3 photography app" id="load_data">         <div class="portfolio-item" style="margin-top:-12px;">             <!-- <div class="hover-bg"> -->             <div class="">                 <?php $sdocname=$ odoc[ 'docpath']; ?>                 <a href="<?php echo base_url() ?>front/home/downloadfile/?name=<?php echo $sdocname; ?>">                 <div class="hover-text" data-toggle="tooltip" data-placement="right" title="<?php echo $odoc[ 'docsubject' ];?>">                     <h4>  <?php echo substr($odoc[ 'docsubject' ],0,20);?> </h4>                 </div>                     <?php                 if( ! empty( $odoc[ 'docthumb' ] ) )                 {                     $thumbname = $odoc[ 'docthumb' ];                 }                 else                 {                     $thumbname = "assets/processedinfo/common.jpg";                 }                 ?>                 <img style="height:188px;width : 263px"                 src="<?php echo base_url () . $thumbname ?>" class="docthumb img-responsive"                 alt="<?php echo $odoc[ 'docsubject' ];?>">                 </a>             </div>             <div>uploaded : <span data-toggle="tooltip" data-placement="right" title="<?php echo $odoc[ 'username' ];?>"> <?php echo substr($odoc[ 'username' ],0,20);?> </span>             </div>             <div>hq : <span data-toggle="tooltip" data-placement="right" title="<?php echo @$odoc[ 'hq' ];?>">  <?php echo substr(@$odoc[ 'hq' ],0,20);?> </span>             </div>             <div>subject : <span data-toggle="tooltip" data-placement="right" title="<?php echo $odoc[ 'docsubject' ];?>">  <?php echo substr($odoc[ 'docsubject' ],0,20);?> </span>             </div>         </div>     </div>     <?php } ?> </div> <?php if(count($adoc)>8){ ?> <button id="show_all" class="btn tf-btn btn-default pull-right">load more</button> <?php } ?> </div> 

this code of on load more button click

$('#show_all').on('click', function(e){     e.preventdefault();     $('.filtereddoccontent .photography').filter(':hidden').show();     $('#show_all').hide(); }); 

change first rule on .filtereddoccontent apply it's children, , not itself:

.filtereddoccontent .photography{      display: none; } 

doing above, first making sure none of .photography elements rendered blocks, hence not occupying space within parent.

jsfiddle demo