Acoustic77 Acoustic77 - 1 year ago 43
jQuery Question

Reorganizing divs vertically with jquery

I have 5 divs going vertically down a page.

I want to be able to click any one, and have it move to be the first div in the order, the top of the "list" in a way. In a perfect world, the others would dim/decrease opacity and the clicked one would slide/animate up to the top while the others bumped down. But, that can come later. I've seen div-reordering done with CSS, but that's not continuously dynamic on the page.

I tried putting all 5 divs inside a container wrapper and doing this in css:

#wrapper { display: table; }

with this javascript (example for clicking second div):


but that messed up my rounded corners on the div, my alignment, and other parts of my existing css.

This seems like it shouldn't be that hard, but I can't figure it out. Thanks for any help!

Answer Source

A very simple solution: move the element to the top using jQuery's prepend() to the parent element.

$("div").click(function() {    
<script src=""></script>