Здравствуйте, не могу решить задачу. Нужно чтобы в секции состоящий из 4 блоков блоки раскрывались при клике, причем раскрывались на всю секцию сдвигая всё остальное или перекрывая их. Схему приложил.
Красным пунктиром обозначено раскрытие блока и направление
БЛОК после раскрытия имеет такую структуру, где полосы это текст
ich_heisse_erich, мой вопрос как раз имел целью раскрыть смысл фразы "блок должен раскрываться". Блок становится больше или из него вылетают еще блоки? Что за превьюшка? Куда добавляется контент? От этих деталей зависит реализация
Никита Полевой, в общем задумка такая, сначала в блоке изображение, при нажатии на изображение блок раскрывается и появляется текстовая часть. Как бы описание. Но контента там много, поэтому нужно что бы блок принял размеры родителя
Твой вариант очень похож на то что нужно, только вот можно ли твой вариант обьединить с верхним? в плане того что блоки по разному раскрываться должны, правый блок должен раскрываться влево. Кароче получится ли здесь использовать transform-origin?
ich_heisse_erich, возможно придется позиционировать внутри контейнера, вместо inline-block и flex, т.к. при увеличении размеров все ползет и не туда куда надо ))
Сергей, Шикарно! Слушай получается ты к каждому блоку добавил собственный класс, который привязывает его четко по положению? а ещё ты добавил кода js, а за что отвечают дополнительные строки?
document.body.addEventListener('click', onClick)
function onClick(e) {
if (e.target.matches('.block') || e.target.parentNode.matches('.block')) {
e.target.closest(".block").classList.toggle('expanded')
document.querySelectorAll(".block").forEach( el => {
if ( el != e.target.closest(".block") ) {
el.classList.toggle('hide');
}
});
}
}
в данном месте всем блокам кроме того по которому кликнули переключается класс .hide
и происходит трансформация видимости, блоки плавно исчезают/появляются.
Простой
