Как развернуть див частично?

Question

я имею

<div id="2" class="slider">
    <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="2" class="slider" был свернут
и былo показанo только N элементов .wow-ggg (допустим три), а ниже была кнопочка ПОКАЗАТЬ ЕЩЕ, И при нажатии показывалось не все сразу остальное а только K элементов .wow-ggg (допустим пять) и при наличии непоказанных элементов эта кнопочка(ПОКАЗАТЬ ЕЩЕ../..свернуть все ..) оставалась пока все элементы не будут показаны, а в коне только - ..свернуть все ...

Кнопку показать еще не могу вставить в разметку <div id="more">Показать ещё</div>, я могу это сделать только через .slider:after { content: "Показать еще"; }

У меня есть такая конструкция https://jsfiddle.net/profy/xwosnjfu/201/ , но это кончено не совсем то что нужно, но которую я через CSS (скрол например) сделаю что-то похожее что мне нужно, ..... может найдется добрая душа для решения вышеописанной задачи, в сложных скриптах я не силен. Спасибо.

Answer 1

И я частично сделал это... Почти точно вы будете получать события клика на псевдоэлемент.

Немного сложновато вышло, и ограничение есть - псевдоэлемент должен быть шириной во весь блок, т.к. определить его истинную ширину довольно затруднительно

Это работает только в одну сторону

let visible = 3;
let visibleStep = 5;

let slider;
let button;
let gggs;

window.onload = init;

function init() {
    slider = document.getElementById("2");
    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)) {
        
            if (event.offsetX <= (slider.clientWidth/2+slider.offsetLeft) && event.offsetX >= slider.offsetLeft) {
                let dif = gggs.length - visible;
                if (dif >= 3) {
                    visible += visibleStep;
                } else {
                    visible += dif;
                }
                expandSlider();
            } else if (event.offsetX <= (slider.clientWidth+slider.offsetLeft) && event.offsetX >= (slider.clientWidth/2+slider.offsetLeft)) {
                visible = 0;
                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++;
    }
}

.slider::after {
    position: absolute;
    width: 50%;
    content: "Показать ещё";
    background: #f00;
}
.slider::before {
    position: absolute;
    left: 50%;
    top: 100%;
    width: 50%;
    content: "Скрыть всё";
    background: #0f0;
}

.slider {
    position: relative;
    background: #00f;
}

<div id="2" class="slider">
    <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>

Проверяем, сколько мы отобразили, сколько осталось и показываем элементы.

Answer 2

Кнопку показать еще не могу вставить в разметку <div id="more">Показать ещё</div>, я могу это сделать только через .slider:after { content: "Показать еще"; }

Если нет возможности вносить изменения в HTML, то можно же создать новый элемент (кнопку) посредством JavaScript. И фактически она у нас будет в HTML-документе. Пример:

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();
});

.slider {display: flex; flex-direction: row; flex-wrap: wrap; height: 24px; padding: 6px 0;}
.wow-ggg {margin: 1px; padding: 3px; background-color: lightgray;}

<div id="2" class="slider">
  <div class="wow-ggg">01</div>
  <div class="wow-ggg">02</div>
  <div class="wow-ggg">03</div>
  <div class="wow-ggg">04</div>
  <div class="wow-ggg">05</div>
  <div class="wow-ggg">06</div>
  <div class="wow-ggg">07</div>
  <div class="wow-ggg">08</div>
  <div class="wow-ggg">09</div>
  <div class="wow-ggg">10</div>
  <div class="wow-ggg">11</div>
  <div class="wow-ggg">12</div>
</div>

БЛОГ НА HUSL

Как развернуть див частично?

Ответы (2 шт):