how to fill a div to fit the screen on clicking it and overlay other divs
<p>i have set of <code>&lt;div&gt;</code> tags with same class name. My aim is when i click on a particular <code>&lt;div&gt;</code> i need to maximize its height and width to fill the screen and overlay the rest of <code>&lt;div&gt;</code>s . I am using the below code to achieve this</p>

<pre><code>$('div').click(function(){
    var isFullscreen = false;
    var d = {};
    var speed = 900; 
    if(!isFullscreen){ // MAXIMIZATION
        d.width = $(window).width();;
        d.height = $(window).height();; 
        isFullscreen = true;
    }
    else{ // MINIMIZATION            
        d.width = "300px";
        d.height = "100px";            
        isFullscreen = false;
    }
    i = 0 
    id = $(this).attr("id");
    while(i&lt;=12){
        if(i != id){
            $("i").hide();
        }
        i++;
    }
    $(this).animate(d,speed)
    })
</code></pre>

<p>So what i did is i gave a <strong>id</strong> to each  in a order from <strong>1 to 12</strong> and trying to hide them except the one clicked. Is this the right way to do this. Apologies for my bad english. Extra Info: I am using Jquery Masonry with fluid layout.</p>
