Creating / Removing a Row in a series of float: left divs

Question

I have a list of div elements, all with float:left one after another like so

<div id="container">

   <div id=0" style="float:left;> Stuff </div>
   <div id=1" style="float:left;> Stuff </div>
   <div id=2" style="float:left;> Stuff </div>
   ...
   <div id=n" style="float:left;> Stuff </div>

</div>

What I am trying to achieve is the following:

If I click on one of the divs, it will push the surrounding divs away (the ones on its left up and the ones on its right down) and populate its own row. Then when clicked again it returns to the original configuration.

My Attempts:

1. Add a brute force separator: just use jQuery to stack
   before and after the div
2. Toggle the CSS property: clear: both for the desired div

It may be because it is rather late, but neither of these approaches seem reliable. What would be a more reasonable means of attaining this functionality?

Thanks for your time!

Answer 1

I think you want to achieve this, please check this Fiddle

 var parentWidth =  $("#container").css("width");
 var originalWidth = $($("#container div")[0]).css("width");
 $("#container div").click(function(){
   if($(this).css("width") != parentWidth) {
     $(this).css("width",parentWidth);
   }
   else {
     $(this).css("width",originalWidth);
   }
 });

Answer 2

        var divWidth = 250;
        var n= 5; //this will be no of inner divs
        $(function(){
            $('#container div').each(function(index, element) {
                $(this).click(function(e) {
                    if($(this).width() == divWidth)
                    {
                        var dt = divWidth;
                        if(index != 0)
                        {
                            $(this).prev().hide();
                            dt += divWidth;
                        }
                        else if(index < n)
                        {
                            $(this).next().hide();
                            dt += divWidth;
                        }
                        $(this).width(dt);
                    }
                    else
                    {
                        $(this).width(divWidth);
                        if(index != 0)
                        {
                            $(this).prev().show();
                        }
                        else if(index < n)
                        {
                            $(this).next().show();
                        }
                    }
                });
            });
        });