I have four 200px*200px div tags and when I click one I would like to change the one I clicked to 800px*800px and hide the other three div tags. I would like to be able to do this to each of them, so say when I click one it will expand and then when I click it again it goes back down and then I can click another.
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;
}
Your current code is too complex to achieve what you want. A simple approach would be following, (check out the fiddle http://jsfiddle.net/xdt0uaxe/1/)
in HTML,
in CSS,
And in jQuery,