@Grizar

Открыть несколько дивов поочереди?

Я имею
<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"> ну чтоб кнопка работала кажадая в своем диве, ну вообще чтоб работало, ...?.

603981c1b25cc768155829.jpeg
  • Вопрос задан
  • 53 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы