Cтранно смншивать show/hide и fadeIn
Это, насколькоя я помню, немного разные вещи.
fadeIn делает элемент непрозрачным
А show/hide показывают/убирают через display:
Но, как написано, так и перевожу
Определить дополнительно стили
/*Многие современные браузеры используют это по умолчанию, но лишним не будет*/
[hidden] {
display:none;
}
.fadein {
opacity: 1;
}
document.addEventListener("DOMContentLoaded", () => {
let list = document.querySelectorAll(".wrapper-boxes .box")
var numToShow = 10;
var button = document.querySelectorAll("button");
var numInList = list.length;
list.forEach(el => el.hidden = true)
if (numInList > numToShow) {
// button.show(); // ??? А как они были скрыты
// Если через hidden то
button.forEach(el => el.hidden = false)
}
list.slice(0, numToShow).forEach(el => el.hidden = false);
button.forEach(el => {
el.addEventListener("click", () => {
var showing = document.querySelectorAll('.wrapper-boxes .box:visible').length
list.slice(showing - 1, showing + numToShow).forEach(el => el.classList.add('fadein'));
var nowShowing = document.querySelectorAll('.wrapper-boxes .box:visible').length
if (nowShowing >= numInList) {
button.forEach(el => el.hidden = true)
}
})
})
})
