Суть в том, что на странице портофолио показываются картинки, сначала их 6 штук и кнопка "Загрузить еще" и при нажатии на нее появляются еще три блока с картинками, хочу доработать код так, чтобы, когда все картинки вышли и больше загружать нечего , кнопка скрывалась.
HTML:
<div class="work-album-items">
<div class="work-album-item"><img class="work-album-item-img" src="/build/img/work1.jpeg"></div>
<div class="work-album-item"><img class="work-album-item-img" src="/build/img/work2.jpeg"></div>
<div class="work-album-item"><img class="work-album-item-img" src="/build/img/work4.jpeg"></div>
<div class="work-album-item"><img class="work-album-item-img" src="/build/img/work5.jpeg"></div>
<div class="work-album-item"><img class="work-album-item-img" src="/build/img/work6.jpeg"></div>
<div class="work-album-item"><img class="work-album-item-img" src="/build/img/work6.jpeg"></div>
<div class="work-album-item"><img class="work-album-item-img" src="/build/img/work6.jpeg"></div>
<div class="work-album-item"><img class="work-album-item-img" src="/build/img/work6.jpeg"></div>
<div class="work-album-item"><img class="work-album-item-img" src="/build/img/work6.jpeg"></div>
<div class="work-album-item"><img class="work-album-item-img" src="/build/img/work6.jpeg"></div>
<div class="work-album-item"><img class="work-album-item-img" src="/build/img/work6.jpeg"></div>
</div>
<a href="#" id="loadMore">Load More</a>
$(function(){
$(".work-album-item").slice(0, 6).show();
$("#loadMore").on('click', function(e){
e.preventDefault();
$(".work-album-item:hidden").slice(0, 3).slideDown();
})
})
P.S. если знаете способ как реализовать весь этот код более элегантно - поделитесь , буду благодарен, т.к. сама подгрузка картинок не оч.