I am working with a list (ul) that contains multiple items displayed in a tiled format. Each item has a brief introduction and can expand to show more information when clicked on. What I would like to achieve is for the expanded item to take up the entire width of the page, pushing other items on the left and right downwards. While my current CSS code works for the first item of each row, it does not work as expected for the rest. Is there a way to achieve this behavior using jQuery or CSS? Alternatively, is there a way to make the currently expanded item become the first item of its row? Thank you!
<ul class="resutls">
<li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li> ...
</ul>CSS
.results li {width:200px; height:140px; margin:7px 14px 7px 0; float:left;}
.results li.current{width:660px; height:auto;}
Jquery
$('li').toggle(function() {
$(this).addClass("current");
$($(this).find('.js-toggleContent')).toggle("slow");
}, function() {
$(this).removeClass("current");
$($(this).find('.js-toggleContent')).toggle("slow");
});