Я имею
<div class="wow-sldo">
<div id="id_wow-sld" class="wow-sld">
<div class="wow-ggg">1</div>
<div class="wow-ggg">2</div>
<div class="wow-ggg">3</div>
<div class="wow-ggg">4-1</div>
<div class="wow-ggg">5-2</div>
<div class="wow-ggg">6-3</div>
<div class="wow-ggg">7-4</div>
<div class="wow-ggg">8-5</div>
<div class="wow-ggg">9-1</div>
<div class="wow-ggg">10-2</div>
<div class="wow-ggg">11-3</div>
<div class="wow-ggg">12-4</div>
<div class="wow-ggg">90-5</div>
<div class="wow-ggg">100</div>
<div class="wow-ggg">таких много</div>
</div>
<div id="id_wow-slk" class="wow-slk">
<div class="wow-ggg">1</div>
<div class="wow-ggg">2</div>
<div class="wow-ggg">3</div>
<div class="wow-ggg">4-1</div>
<div class="wow-ggg">5-2</div>
<div class="wow-ggg">6-3</div>
<div class="wow-ggg">7-4</div>
<div class="wow-ggg">8-5</div>
<div class="wow-ggg">9-1</div>
<div class="wow-ggg">10-2</div>
<div class="wow-ggg">11-3</div>
<div class="wow-ggg">12-4</div>
<div class="wow-ggg">90-5</div>
<div class="wow-ggg">100</div>
<div class="wow-ggg">таких много</div>
</div>
</div>
Мне нужно чтобы изначально при загрузке страницы
<div id="id_wow-sld" class="wow-sld"> и <div id="id_wow-slл" class="wow-slл">
быил свернуты
и былo показанo только
*N* элементов .wow-ggg (допустим три), а ниже была кнопочка ПОКАЗАТЬ ЕЩЕ/СВЕРНУТЬ
И при нажатии показывалось не все сразу остальное а только
*K* элементов .wow-ggg (допустим пять) и при наличии непоказанных элементов эта кнопочка(ПОКАЗАТЬ ЕЩЕ../..свернуть все ..) оставалась пока все элементы не будут показаны, а в конце когда все элементы закончятся ПОКАЗАТЬ ЕЩЕ-исчезает а останется только - ..свернуть все ... (можно и без свернуть----если это еще затруднительно)
Кнопку
ПОКАЗАТЬ ЕЩЕ../..свернуть все я не могу вставить в разметку, я могу это сделать только через .slider:after { content: "Показать еще"; }, или добавить ее скриптом.
У меня есть такой скрипт
var value = true
var more = document.createElement('button');
var textInBtnMore = document.createTextNode('Показать еще');
more.classList.add("more");
more.appendChild(textInBtnMore);
if (value) {
document.body.appendChild(more);
}
var data = Array.from(document.querySelectorAll('.wow-ggg')),
item = 0,
step = 4;
item += step;
data.slice(step).forEach(e => e.style.display = 'none');
document.querySelector('.more').addEventListener('click', function(e) {
var tmp = data.slice(item, item + step);
tmp.forEach(ee => ee.style.display = 'block');
item += step;
if (tmp.length < 4)
this.remove();
});
и такой
let visible = 3;
let visibleStep = 5;
let slider;
let button;
let gggs;
window.onload = init;
function init() {
slider = document.getElementById("id_wow-slk");
button = document.getElementById("more");
gggs = slider.children;
expandSlider();
window.addEventListener("click", function(event) {
if (event.offsetY <= (slider.offsetHeight+slider.offsetTop + slider.offsetTop) && event.offsetY >= (gggs[visible-1].offsetTop + gggs[visible-1].offsetHeight - slider.offsetTop) && event.offsetX <= slider.clientWidth && event.offsetX >= slider.offsetLeft) {
let dif = gggs.length - visible;
if (dif >= 3) {
visible += visibleStep;
expandSlider();
} else {
visible += dif;
expandSlider();
}
if (visible == gggs.length) {
this.onclick = null;
let sheet = document.styleSheets[0];
let rules = sheet.cssRules || sheet.rules;
rules[0].style.cssText = "";
}
}
});
}
function expandSlider() {
let i = 0;
for (let child of gggs) {
if (i >= visible) {
child.style.display = "none";
} else {
child.style.display = "block";
}
i++;
}
}
НО эти скрипты работают только для одного дива или
<div id="id_wow-slk" class="wow-slk"> или
<div id="id_wow-sld" class="wow-sld">
КАК мне скрутить это дело чтобы работало на неограниченно кол-ве дивов,....для нескольких дивов,
<div id="id_wow-slk" class="wow-slk"> ,
<div id="id_wow-sld" class="wow-sld"> ну чтоб кнопка работала кажадая в своем диве, ну вообще чтоб работало, ...?.
