Как сделать так, чтобы элементы в моем внутреннем div-элементе покрывали весь внешний div-элемент при нажатии?

Question

У меня есть div (page2box), который центрирован на экране, который, в свою очередь, разделен на несколько разных div. Они выглядят так:

Когда я нажимаю на элемент «Захватить флаг», то все остальные элементы (Хакатон, Конкурентная программа ... и Искусственный интеллект) исчезают, а затем блок захвата флага охватывает весь блок (page2box).

Вот соответствующий код:

#page2{
    background: linear-gradient(-180deg, #2B1F2D, rgb(77, 35, 49), rgb(87, 23, 44));
    height:100vh;
  

}

#page2box{
  height:90vh;
  width: 90%;
  background-color: darkblue;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}

.page2Items{
  height:100%;
  width:25%;
}

.upper{
  height:40%;

  width:100%;
  font-family: 'Cinzel', Arial, Helvetica, sans-serif;
  font-size: 280%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.lower{
  height:60%;
  font-family: 'Average', sans-serif;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 150%;
  text-align: center;
}

#elem1{
  background-color: cyan;
}

#elem2{
  background-color: red;

}

#elem3{
  background-color: blueviolet;

}

#elem4{
  background-color: orangered;

}

		<div id = "page2">
            <div id="page2box">
        <div class="page2Items" id="elem1">
            <div class="upper">Capture The Flag</div>
            <div class="lower">Lorem ipsum dolor sit amet, consectetit. Mosielit. Mosim felis libero, tincidunt eu odio vel, vulputate tinci Integer odio dolor, elementum in sem a, tristique cursus tortor. Duis sodales varius turpis ac aliquam. Integer congue fermentum posuere. Pellentesque varius massa at justo laoreet, non interdum nunc pretium. Integer porttitor tempor ante, vel laoreet sem placerat in.</div>
        </div>	
        <div class="page2Items" id="elem2">
            <div class="upper">Hackathon</div>
            <div class="lower">Lorem ipsum dolor sit amet, consectetit. Mosielit. Mosim felis libero, tincidunt eu odio vel, vulputate tinci Integer odio dolor, elementum in sem a, tristique cursus tortor. Duis sodales varius turpis ac aliquam. Integer congue fermentum posuere. Pellentesque varius massa at justo laoreet, non interdum nunc pretium. Integer porttitor tempor ante, vel laoreet sem placerat in.</div>           
        </div>	
        <div class="page2Items" id="elem3">
            <div class="upper">Competitive Prog...</div>
            <div class="lower">Lorem ipsum dolor sit amet, consectetit. Mosielit. Mosim felis libero, tincidunt eu odio vel, vulputate tinci Integer odio dolor, elementum in sem a, tristique cursus tortor. Duis sodales varius turpis ac aliquam. Integer congue fermentum posuere. Pellentesque varius massa at justo laoreet, non interdum nunc pretium. Integer porttitor tempor ante, vel laoreet sem placerat in.</div>            
        </div>	
        <div class="page2Items" id="elem4">
            <div class="upper">Artificial Intelligence</div>
            <div class="lower">Lorem ipsum dolor sit amet, consectetit. Mosielit. Mosim felis libero, tincidunt eu odio vel, vulputate tinci Integer odio dolor, elementum in sem a, tristique cursus tortor. Duis sodales varius turpis ac aliquam. Integer congue fermentum posuere. Pellentesque varius massa at justo laoreet, non interdum nunc pretium. Integer porttitor tempor ante, vel laoreet sem placerat in.</div>            
        </div>		
		
		
    </div>
		</div>

Я пытался изменить внутреннюю HTML страницы, но это создавало много беспорядка. Как мне это сделать? Если возможно, попробуйте представить решение, в котором используются только простые CSS и / или ванильные JS.

Answer 1

Следующие изменения сделают эту работу:

function expand(targetElementId) {
  let targets = document.getElementsByClassName("page2Items");

  let target = document.getElementById(targetElementId);
  if(target.style.width=="100%"){
    for (let i = 0; i < targets.length; i++) {
      targets[i].style.width = "25%";
      targets[i].style.display = "inline-block";
    }
  } else {
    for (let i = 0; i < targets.length; i++) {
      if (targets[i].id == targetElementId) {
        targets[i].style.width = "100%";
      } else {
        targets[i].style.display = "none";
      }
    }
  }
}

В HTML добавьте событие клика, передавая идентификатор для каждого div (который нажимает пользователь):

<div #elem1 class="page2Items" id="elem1" onclick="expand('elem1')">...</div>
<div #elem2 class="page2Items" id="elem2" onclick="expand('elem2')">...</div>
<div #elem3 class="page2Items" id="elem3" onclick="expand('elem3')">...</div>
<div #elem4 class="page2Items" id="elem4" onclick="expand('elem4')">...</div>

В файле css никаких изменений не требуется. JS будет обрабатывать функциональность.

Надеюсь, что это работает, как ожидалось.

Answer 2

** Вы можете контролировать это, используя javascript **

Следующие шаги могут быть

1. Добавить функцию onclick для всех ваших div / s
2. спредов до 100% ширины и высоты дочернего элемента, по которому щелкнули
3. Скрыть другие элементы из DOM (видимость скрыта)
4. И до go вернуться в предыдущее состояние (все 4 видимых деления) - обрабатывать в onclick функция, в случае, если пользователь снова нажимает на развернутое изображение, затем изменяет его размер до исходного размера и делает все остальные элементы div видимыми: true

Псудокод может быть

var toggleFunction = function()
{
   var lastElementRef;
   return function(event) 
  {
    if(event.target !== lastElement)
     //handle expand and hide other element 
    else 
    // go back to original state, Resize the click again clicked item and resize and show all the elements
  }
}

Answer 3

Вверху Добавьте функцию onclick к вашему div

<div class="page2Items" id="elem4" onclick="changeSize(elem4)">

и добавьте код Javascript в Javascript Код должен работать нормально

function changeSize(elem) {

        elem.style.position = "absolute"
        elem.style.width = "100%"
    }