4

Есть 100 элементов с блоками.
Необходимо показать на странице первые 10 блоков.
При повторном клике на кнопку, показывать следующие 10 блоков.

var box = document.querySelectorAll('.box');
var btn = document.getElementsByTagName('button');
console.log(box);

btn = addEventListener("click", function() {
  box.slice(0, 9);

})
.wrapper-boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.box {
  margin: 5px;
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 3px;
}

button {
  width: 100%;
  line-height: 40px;
  background-color: orange;
  border: 4px solid #fff;
  color: #fff;
}
<div class="wrapper-boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<button>Show 10</button>

https://codepen.io/vitalikdark/pen/vYOXNvW

6
  • Как показывать 10+ элементов? 19 фев 2020 в 19:20
  • 1
    Вариантов на вскидку как минимум 3. Как Вы пробовали делать? И пробовали ли вообще?
    – Denis640Kb
    19 фев 2020 в 19:22
  • 2
    тож кинул вам кодепен с тем что на работал вы вооюбще смотрели?????? 19 фев 2020 в 19:25
  • 1
    Код нужно вставлять сразу в вопрос
    – Grundy
    19 фев 2020 в 19:36
  • 1
    Показывать это значить показать ещё +10 блоков 19 фев 2020 в 19:56

5 ответов 5

12

Codepen я смотрел.
Вот только попытки Ваши закончились на box.slice(0,9)
Это потом Вы хоть что-то добавили.
Так как Grundy сделал мне выговор, который мы ещё обсудим, решил добавить ответ.

    window.onload = function () {
        var box=document.getElementsByClassName('box');
        var btn=document.getElementById('button');
        for (let i=10;i<box.length;i++) {
            box[i].style.display = "none";
        }

        var countD = 10;
        btn.addEventListener("click", function() {
            var box=document.getElementsByClassName('box');
            countD += 10;
            if (countD <= box.length){
                for(let i=0;i<countD;i++){
                    box[i].style.display = "block";
                }
            }

        })
    }
    body {
        background: blue;
    }
    .wrapper-boxes {
        display: flex;
        text-align: center;
        flex-direction: row;
        flex-wrap: wrap;
        width: 79%;
    }
    .box {
        margin: 5px;
        width: 100px;
        height: 100px;
        background-color: orange;
        border-radius: 3px;
    }
    button {
        width: 78%;
        line-height: 40px;
        background-color: orange;
        border: 4px solid #fff;
        color: #fff;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
<div class="wrapper-boxes">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<button id="button">Show 10</button>

2
  • Когда там @Grundy тебе выговор делал? :)
    – Grundy
    19 фев 2020 в 22:43
  • 1
    box - можно один раз получить, не нужно проходить по уже видимым элементам при каждом нажатии кнопки
    – Grundy
    19 фев 2020 в 23:11
7

Всем блокам дать класс-невидимку, при каждом клике собрать все элементы с этим классом и с первых N элементов убрать невидимку, дать другой класс со стилями:

var more = document.querySelectorAll('.more');

for (var i = 0; i < more.length; i++) {
  more[i].addEventListener('click', function() {
    var showPerClick = 3;
    
    var hidden = this.parentNode.querySelectorAll('div.hidden');
    for (var i = 0; i < showPerClick; i++) {
      if (!hidden[i]) return this.outerHTML = "";

      hidden[i].classList.add('box');
      hidden[i].classList.remove('hidden');
    }
  });
}
.wrapper-boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.box {
  margin: 1px;
  width: 20px;
  height: 20px;
  background-color: orange;
}

.hidden {
  display: none;
}
<div>
  <!-- какой-нибудь общий родитель для кнопки и блоков -->
  <button class="more">Show 3</button>
  <hr>
  <div class="wrapper-boxes">
    <div class="hidden"></div><div class="hidden"></div><div class="hidden"></div>
    <div class="hidden"></div><div class="hidden"></div><div class="hidden"></div>
    <div class="hidden"></div><div class="hidden"></div><div class="hidden"></div>
    <div class="hidden"></div><div class="hidden"></div><div class="hidden"></div>
    <div class="hidden"></div><div class="hidden"></div><div class="hidden"></div>
    <div class="hidden"></div>
  </div>
</div>

2
  • Очень интересно, откуда вдруг два минуса)) 22 фев 2020 в 18:30
  • 4
    @OPTIMUS PRIME Вот очень много людей с негативным предвзятым отношением. Я всё тоже стараюсь не обращать на них внимание, но они постоянно портят всё настроение. От меня тоже большой плюс.
    – Denis640Kb
    24 фев 2020 в 12:12
7

Вот красивое решение. В скрипте можно указать, какое количество элементов выводить. Когда все элементы уже показаны, то кнопка скрывается. Примеры:

Решение на JavaScript(jQuery). 100 элементов

$(document).ready(function() {
  var list = $(".wrapper-boxes .box");
  var numToShow = 10; //сколько показывать элементов
  var button = $("button");
  var numInList = list.length;
  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();
  button.click(function() {
    var showing = list.filter(':visible').length;
    list.slice(showing - 1, showing + numToShow).fadeIn();
    var nowShowing = list.filter(':visible').length;
    if (nowShowing >= numInList) {
      button.hide();
    }
  });
});
.wrapper-boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  counter-reset: albumList;
}

.box {
  position: relative;
  margin: 5px;
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 3px;
}

button {
  width: 550px;
  line-height: 40px;
  background-color: orange;
  border: 4px solid #fff;
  color: #fff;
}

.box:after {
  counter-increment: albumList;
  content: counter(albumList);
  position: absolute;
  top: 10%;
  left: 10%;
  padding: 4% 7%;
  border-radius: 5%;
  border: 1px solid lightgray;
  text-align: center;
  background-color: white;
  font-size: 2vw;
  font-weight: bold;
  font-family: monospace;
  box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.33) inset;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<button>Показать ещё 10</button>

Другое количество элементов (не кратное десяти)

$(document).ready(function() {
  var list = $(".wrapper-boxes .box");
  var numToShow = 10; //сколько показывать элементов
  var button = $("button");
  var numInList = list.length;
  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();
  button.click(function() {
    var showing = list.filter(':visible').length;
    list.slice(showing - 1, showing + numToShow).fadeIn();
    var nowShowing = list.filter(':visible').length;
    if (nowShowing >= numInList) {
      button.hide();
    }
  });
});
.wrapper-boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  counter-reset: albumList;
}

.box {
  position: relative;
  margin: 5px;
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 3px;
}

button {
  width: 550px;
  line-height: 40px;
  background-color: orange;
  border: 4px solid #fff;
  color: #fff;
}

.box:after {
  counter-increment: albumList;
  content: counter(albumList);
  position: absolute;
  top: 10%;
  left: 10%;
  padding: 4% 7%;
  border-radius: 5%;
  border: 1px solid lightgray;
  text-align: center;
  background-color: white;
  font-size: 2vw;
  font-weight: bold;
  font-family: monospace;
  box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.33) inset;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<button>Показать ещё 10</button>

Решение на нативном JavaScript

document.addEventListener("DOMContentLoaded", function() {
  const limit = 10;
  const nextOpen = (wrapper, button) => {
    const boxs = wrapper.querySelectorAll(".box"),
      len = boxs.length - 2,
      endBox = wrapper.querySelector(".nextstop"),
      index = [...boxs].indexOf(endBox) + limit;
    if (endBox) endBox.classList.remove("nextstop");
    if (index < len) boxs[index].classList.add("nextstop");
    else button.remove()
  }
  document.querySelectorAll(".wrapper-boxes").forEach(wrapper => {
    const button = wrapper.nextElementSibling;
    button.addEventListener("click", nextOpen.bind(null, wrapper, button));
    nextOpen(wrapper, button);
  })
});
.wrapper-boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  counter-reset: albumList;
}

.box {
  position: relative;
  margin: 5px;
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 3px;
}

button {
  width: 550px;
  line-height: 40px;
  background-color: orange;
  border: 4px solid #fff;
  color: #fff;
}

.box:after {
  counter-increment: albumList;
  content: counter(albumList);
  position: absolute;
  top: 10%;
  left: 10%;
  padding: 4% 7%;
  border-radius: 5%;
  border: 1px solid lightgray;
  text-align: center;
  background-color: white;
  font-size: 2vw;
  font-weight: bold;
  font-family: monospace;
  box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.33) inset;
}

.box.nextstop~.box {
  display: none;
}
<div class="wrapper-boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<button>Показать ещё 10</button>

2
  • codepen 1

    jQuery(document).ready(function($){
      $(".show-more-btn").click(function(e){
        $(".show-more-item:hidden").slice(0,3).fadeIn();
        if ($(".show-more-item:hidden").length < 1) $(this).fadeOut();
      })
    })
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="show-more-item">blah</div>
    <div class="show-more-item">blah</div>
    <div class="show-more-item">blah</div>
    <div class="show-more-item">blah</div>
    <div class="show-more-item" style="display: none;">blah</div>
    <div class="show-more-item" style="display: none;">blah</div>
    <div class="show-more-item" style="display: none;">blah</div>
    <div class="show-more-item" style="display: none;">blah</div>
    <div class="show-more-item" style="display: none;">blah</div>
    <div class="show-more-item" style="display: none;">blah</div>
    <div class="show-more-item" style="display: none;">blah</div>
    <div class="show-more-item" style="display: none;">blah</div>
    <div class="show-more-item" style="display: none;">blah</div>
    <div class="show-more-btn">Load More</div>

  • codepen 2

    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    
    body {
      background: #e9ecef;
    }
    
    h3 {
      background: #1C1D1F;
      color: white;
      width: 80%;
      text-align: center;
      margin: 15px auto;
      padding: 10px;
    }
    
    ul {
      width: 50%;
      margin-left: auto;
      margin-right: auto;
      list-style-type: none;
      background: white;
    }
    
    li {
      height: 50px;
      line-height: 50px;
      border-top: 1px solid #e9ecef;
    }
    
    ul a {
      display: block;
      height: 100%;
      text-decoration: none;
      color: black;
      padding-left: 10px;
      position: relative;
      transition: background .3s;
    }
    
    ul a:after {
      content: '⇢';
      position: absolute;
      right: 10px;
    }
    
    ul a:hover {
      background: #cdcbc4;
    }
    /* CHECKBOX CONTAINER STYLES
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    
    .container {
      position: relative;
      height: auto;
      border-top: 0;
    }
    
    [type="checkbox"] {
      position: absolute;
      left: -9999px;
    }
    
    label {
      background: #e4e3df;
      display: block;
      width: 100%;
      height: 50px;
      cursor: pointer;
      position: absolute;
      top: 0;
      transition: top .45s cubic-bezier(.44, .99, .48, 1);
    }
    /*
     * use the rule below for testing purposes
     * label:hover {
     *    background: yellow;
     *  }
     */
    
    label:before,
    label:after {
      position: absolute;
    }
    
    label:before {
      content: 'More';
      left: 10px;
    }
    
    label:after {
      content: '⇣●';
      right: 10px;
      -webkit-animation: sudo .85s linear infinite alternate;
      animation: sudo .85s linear infinite alternate;
    }
    
    @keyframes sudo {
      from {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
      }
      to {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
      }
    }
    
    input[type="checkbox"] ~ ul {
      width: 100%;
      overflow: hidden;
      max-height: 0;
      transition: max-height .45s cubic-bezier(.44, .99, .48, 1);
    }
    /* CHECKED STATE STYLES
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    
    [type="checkbox"]:checked ~ ul {
      /**
       * the value of the `max-height` property specifies the transition speed
       * set a very big value (e.g. 9999px) to see the difference
       */
      
      max-height: 300px;
    }
    
    [type="checkbox"]:checked + label {
      top: 100%;
    }
    
    [type="checkbox"]:checked + label:before {
      content: 'Less';
    }
    
    [type="checkbox"]:checked + label:after {
      content: '⇡●';
    }
    
    ul li:last-child {
      margin-bottom: 50px;
    }
    <h3>Pure CSS "Show More/Less" functionality with Transitions<br>(slideToggle effect with no JavaScript).</h3>
    
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
      <li class="container">
        <input type="checkbox" id="check_id">
        <label for="check_id"></label>
        <ul>
          <li><a href="#">Five</a></li>
          <li><a href="#">Six</a></li>
          <li><a href="#">Seven</a></li>
          <li><a href="#">Eight</a></li>
          <li><a href="#">Nine</a></li>
          <li><a href="#">Ten</a></li>
        </ul>
      </li>
    </ul>

2

Кого интересует более проработанная версия, в адаптивных блоках в ряд 3 блока, плюс кнопка показать еще блоки с фото, показываем 6 блоков, но если надо подгрузить еще 6, нажимаем кнопку показать еще, если все фото загружены, кнопка исчезает. Код подгрузить еще блоки, позаимствовал у автора выше.

Для фото до и после, используется скрипт twentytwenty.

Таким способом можно показывать работы, до и после, ну и для другого применить.

 //подгрузить еще по кнопке, если все элемнты подгружены, скрывает кнопку
 $(window).on('load', function() {
    initTwenty();
  });

  // Фото, до и после
  function initTwenty() {
    $(".twentytwenty").twentytwenty({
      no_overlay: false, // Не показывать наложение было, стало, true скрыть
      // Перемещать ползунок при наведении курсора мыши
      move_slider_on_hover: false, 
      // Разрешить пользователю проводить пальцем в любом месте
      // изображения для управления движением ползунка.
      move_with_handle_only: true, 
      before_label: 'До',
      after_label: 'После'
    });
  }

  $(document).ready(function() {
    var list = $(".gggggggg .twentytwenty");
    var numToShow = 6; //сколько показывать элементов
    var button = $("button");
    var numInList = list.length;
    list.hide();
    if (numInList > numToShow) {
      button.show();
    }
    list.slice(0, numToShow).show();
    button.click(function() {
      var showing = list.filter(':visible').length;
      list.slice(showing - 1, showing + numToShow).fadeIn();
      var nowShowing = list.filter(':visible').length;
      if (nowShowing >= numInList) {
        button.hide();
      }
      initTwenty();
    });
  });
.prfota {
  margin: 0 0 -40px -40px;
}
.twentytwenty-wrapper{
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(33.333333% - 0px);
  flex: 0 0 calc(33.333333% - 0px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.twentytwenty-container{
margin: 0 0 40px 40px;
}

.gggggggg button {
  width: 280px;
  height: 60px;
  line-height: 60px;
  border: 1px solid #CB002B;
  background: #fff;
  font-weight: 600;
  text-align: center;
  color: #282725;
  text-transform: uppercase;
  border-radius: 90px;
  margin-top: 40px;
}
.gggggggg button:hover {
  background: #282725;
  border: 1px solid #282725;
  color: #fff;
}

.wr {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.prfota {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://test.vl-it.ru/media/twentytwenty/css/twentytwenty.css">
 <script src="https://test.vl-it.ru/media/twentytwenty/js/jquery.event.move.js"></script>
 <script src="https://test.vl-it.ru/media/twentytwenty/js/jquery.twentytwenty.js"></script>
 
 <div class="gggggggg">
   <div class="prfota wr prfot">
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
   </div>

   <button>Показать еще</button>
 </div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.