show/hide multiple div tags at once and change the size of the remaining div tag

Question

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

Answer 1

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,

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="tiles"></div>
<div class="tiles"></div>
<div class="tiles"></div>
<div class="tiles"></div>

in CSS,

.tiles{
    width: 200px;
    height: 200px;
    padding-top: 20%;
    margin: 0% 0% 2.5% 2.5%;
    height: auto;
    float: left;
    background-color: red;
    border-radius: 20px;
    border: 2px solid #707070;
}
.tiles.active{
    width: 800px;
    height: 800px;
    display: block !important;
}
.tiles.inactive{
    display:none;
}

And in jQuery,

$(document).ready(function(){
    $(".tiles").click(function(){
        if($(this).hasClass("active")){
            $(this).removeClass("active");
            $(".tiles.inactive").removeClass("inactive");
        }
        else{
            $(".tiles").addClass("inactive");   
            $(this).removeClass("inactive").addClass("active");
        }
    });
});