StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Final Update</strong></p> <p>Here is a full working solution (<em>pretty straight forward in my opinion</em>) with JS to set the positioning (<em>a simple calculation</em>) and CSS transitions for the rest..</p> <p><strong>Demo at</strong> <a href="http://jsfiddle.net/gaby/pYdKB/3/" rel="nofollow">http://jsfiddle.net/gaby/pYdKB/3/</a></p> <p>It maintains the fluidity of <code>float:left</code> and works with any number of elements, and you can keep the <code>:nth-child</code> for the styling, and it will also work if you want to leave more than one element visible..</p> <p><strong>javascript</strong></p> <pre><code>var wrapper = $('.wrapper'), boxes = wrapper.children(), boxWidth = boxes.first().outerWidth(true), boxHeight = boxes.first().outerHeight(true); function rePosition(){ var w = wrapper.width(), breakat = Math.floor( w / boxWidth ); // calculate fluid layout, just like float:left boxes .filter(':not(.go)') .each(function(i){ var matrixX = ((i)%breakat)+1, matrixY = Math.ceil((i+1)/breakat); $(this).css({ left:(matrixX-1) * boxWidth , top: (matrixY-1) * boxHeight }); }); } $('.box').click(function(){ $(this) .siblings() .toggleClass('go');// just add the go class, and let CSS handle the rest rePosition(); // recalculate final positions and let CSS animate the boxes }); $(window).resize(rePosition); $(window).trigger('resize'); </code></pre> <p><strong>CSS</strong></p> <pre><code>.wrapper{ position:relative; } .box{ width:200px; height:100px; position:absolute; margin:5px; cursor:pointer; overflow:hidden; text-align: center; line-height: 100px; -moz-transition-property: top,left,width,height; -webkit-transition-property: top,left,width,height; -ms-transition-property: top,left,width,height; -o-transition-property: top,left,width,height; transition-property: top,left,width,height; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } .go{ height:0; width:0; } </code></pre> <p><em><strong>note</strong>: As @Athari correctly mentioned in the comments, you should include all browser prefixes for the widest support. (my initial answer only included moz / webkit and the standard)</em></p> <hr> <p><strong>Original Answer</strong> </p> <p>You can not do it directly with your current HTML structure. The floated concept does not support it.</p> <p>But if you can afford an extra wrapper, then it is no problem..</p> <p>Just slide the contents of your extra wrapper element..</p> <p>Put the <code>float</code> code on the wrapper element and use</p> <pre><code>$(document).ready(function() { $(".block-wrapper").click(function() { $(this).siblings().find('.block').slideToggle("slow"); }); }); </code></pre> <p><strong>Demo at</strong> <a href="http://jsfiddle.net/gaby/t8GNP/" rel="nofollow">http://jsfiddle.net/gaby/t8GNP/</a></p> <hr> <p><strong>Update #1</strong></p> <p>If you need to move the clicked element to the top left and back, then you cannot really do it with CSS. </p> <p>You will need to manually position them (<em>through JS</em>), set CSS transitions (<em>or jquery</em>), and apply the new positions once you click. </p> <p>Later on you might want more than one to remain visible and reposition as well..</p> <p>So you might want to take a look at the great <a href="http://isotope.metafizzy.co/" rel="nofollow">Isotope plugin</a> which can handle this and a multitude of more situations/layouts </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload