Как скрыть часть блока?

Question

[BerettaPiffy]

Есть оранжевый блок, в нем нужно отображать только первые 2 элемента (зеленый блок), остальные скрытые (фиолетовый блок ), при клике на фиолетовую стрелочку показывать что скрыто. Как это реализовать?

Answer 1

[fallus]

.parent .block:nth-child(2) ~ .block{
  display: none
}
.parent.active .block:nth-child(2) ~ .block{
  display: block
}

// jQuery
$('.button').on('click', function(){
  $('.parent').addClass('active');
});

// или не jQuery
document.querySelector('.button').addEventListener('click', function(){
  document.querySelector('.parent').classList.add('active');
});

// я не сумасшедший.

Comments

[BerettaPiffy]

А есть возможность плавного появления скрытых элементов, на подобии slideToggle?

[fallus]

BerettaPiffy, чтобы прям вообще похоже на slideToggle было — придётся заморочиться.
Зависит от того, есть ли padding, border у блоков. Фиксированная высота или нет.

Если не менять\анимировать высоту блоков, то можно так:

.block {
    transform-origin: 50% 50%:;
}

@keyframes showBlocks {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.parent .block:nth-child(2) ~ .block {
    transform: scale(0);
    display: none
}

.parent.active .block:nth-child(2) ~ .block {
    display: block;
    animation: showBlocks .5s ease 1 forwards;
}

Или использовать scaleY. Или изменить transform-origin на 50% 0%.
Тут уже анимация субъективна.

[fallus]

BerettaPiffy, не, ну если jQuery только юзать, то удалить то, что выше, и использовать это:

$('.button').on('click', function(){
  $('.parent .block:hidden').slideToggle(500);
});

.parent .block:nth-child(2) ~ .block {
    display: none
}

Answer 2

[Александр]

Во-первых, задать для зеленого блока css свойство overflow: hidden; с фиксированным height
Во-вторых, использовать для отображения js (хотя можно и на css)

document.getElementById('strlochka').onclick = function () {
   const green = document.getElementById('green');
   green.style.overflow = 'auto';
   green.style.height = 'auto';
}

Код не тестировал, смотрите и подгоняйте сами.