My goal is to create an interactive layout with four 200px by 200px div tags. When a user clicks on one of the divs, I want it to expand to 800px by 800px and hide the other three div tags. The expanded div should be able to revert back to its original size when clicked again, allowing the user to interact with each div individually.
CSS:
#tile1-show, #tile2-show, #tile3-show, #tile4-show{
width: 20%;
padding-top: 20%;
margin: 0% 0% 2.5% 2.5%;
height: auto;
float: left;
background-color: red;
border-radius: 20px;
border: 2px solid #707070;
}
#tile1-hide, #tile2-hide, #tile3-hide, #tile4-hide {
width: 40%;
height: 40%;
float: left;
display: none;
border-radius: 20px;
border: 2px solid #707070;
}