@BerettaPiffy

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

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

5e1ed67d5fe7b263284309.jpeg
  • Вопрос задан
  • 114 просмотров
Решения вопроса 1
fallus
@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');
});

// я не сумасшедший.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
AleksandrB
@AleksandrB
Во-первых, задать для зеленого блока css свойство overflow: hidden; с фиксированным height
Во-вторых, использовать для отображения js (хотя можно и на css)
document.getElementById('strlochka').onclick = function () {
   const green = document.getElementById('green');
   green.style.overflow = 'auto';
   green.style.height = 'auto';
}

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

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

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