Gallery: Load more (or less) images on click

gallery-load-more-or-less-images-on-click.markdown

Gallery: Load more (or less) images on click

A Pen by Dragoeco on CodePen.

License.

index.html

<div>
  <ul class="gallery">
    <li><img src="http://lorempixel.com/100/60/" /></li>
    <li><img src="http://lorempixel.com/100/60/" /></li>
    <li><img src="http://lorempixel.com/100/60/" /></li>
    <li><img src="http://lorempixel.com/100/60/" /></li>
    <li><img src="http://lorempixel.com/100/60/" /></li>
    <li><img src="http://lorempixel.com/100/60/" /></li>
    <li><img src="http://lorempixel.com/100/60/" /></li>
    <li><img src="http://lorempixel.com/100/60/" /></li>
    <li><img src="http://lorempixel.com/100/60/" /></li>
  </ul>
</div>  
<div class="more">Show more</div>
<div class="less">Show less</div>

script.js

$(document).ready(function () {
    $('.gallery li:lt(3)').show();
    $('.less').hide();
    var items =  9;
    var shown =  3;
    $('.more').click(function () {
        $('.less').show();
        shown = $('.gallery li:visible').length+3;
        if(shown< items) {
          $('.gallery li:lt('+shown+')').show(300);
        } else {
          $('.gallery li:lt('+items+')').show(300);
          $('.more').hide();
        }
    });
    $('.less').click(function () {
        $('.gallery li').not(':lt(3)').hide(300);
        $('.more').show();
        $('.less').hide();
    });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

.gallery {
  width: 330px;
  margin: 0;
  padding: 0;
}
.gallery li { 
  display: none;
  float: left;
  list-style: none;
  margin-right: 10px;
}
.more, .less {
  background-color: #000;
  clear: both;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 14px;
  margin-top: 6px;
  padding: 6px 0;
  text-align: center;
	text-transform: uppercase;
  width: 320px;
}

Problem solve Thanks