Jquery Show/Hide Div

I am trying to achieve like this.

I have total 4 div. each div have check box.

So it is like this

1  2  3  4

What I want to do is, when 2 , 3, 4 div checkbox are selectable. But Once div is checked, another 2 div wi开发者_开发问答ll be hide.

Let's say, if i will choose 3, 2 and 4 will be hide. Till this stage, I am able to do. But the problem i got is about

After 2 and 4 is hide. Layout became like this

1    3

2 and 4 div are still there, so there's still spacing between them.

What I want to get is just

1 3

How can i achieve this ?

From what I can understand, you don't seem to be hiding the divs but the contents of the div. In order to make them completely invisible you need to use the hide() method.

$("#div2, #div4").hide();

this will take the divs out of the page flow completely

what if you do something like this(to remove the innerHTML inside the divs):

$("div#1, div#3").html("");

Will this work???

Put to checkboxes:

onclick="return swapdivs('div4');"

put this to divs

<div id="div4">
</div>

And this is your js:

function swapdivs(id){
    $("#"+id).toggle("fast");
    return false;
    };