Artificial Intelligence Question posted in
ChatGBT is becoming a world-wide phenomena, try it out here.

How to make the the elements in my inner-div cover the whole outer-div when clicked upon? – Artificial Intelligence

I have a div (page2box) which is centered on the screen, which in turn in divided intro different divs. They look like this:
enter image description here

What I want is, when I click on the Capture the Flag div, all other divs (Hackathon, Competitive prog… and Artificial Intelligence) disappear and then the Capture the Flag div covers the entire div(page2box).

Here’s the relevant code:

#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>

I tried to change the innerHTML of the page but that created a lot of mess. How do I make this happen? If possible, please try to present a solution which uses plain CSS and/or vanilla JS only.

Tags:

3

Answers


  1. 0

    In Above Add onclick Function to your div 

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

    And Add Following Javascript code in Javascript Code should be working fine

    function changeSize(elem) {

        elem.style.position = "absolute"
        elem.style.width = "100%"
    }
    Login or Signup to reply.
  2. 0

    The below changes will do the job:

    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";
      }
    }
  }
}

    In HTML add click event passing the id on each div (which the user is clicking):

    <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>

    There is no change required in css file. The JS will handle the functionality.

    Hope this works as expected.

    Login or Signup to reply.
  3. 0

    **You can control that using javascript **

    Following can be steps

    1. Add onclick function to all your div/s
    2. spread to 100% width & height of clicked child
    3. Hide other elements from DOM (visibility:hidden)
    4. And to go back to previous state (all 4 divs visible) – handle in onclick function, in case user clicks again on expanded , then resize back to its original size and make all other div element visible:true

    Psudo code can be 

    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
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search