2

I have four Div's one after the other inside a main div and aligned vertically.

Like:

DIV1
DIV2
DIV3
DIV4

I want that clicking on any of the DIV, the div whose is clicked comes on the top and the other slide down. How can i do it using jQuery?

E.g.

If DIV3 was clicked the divs reorder themselves like this:

DIV3
DIV1
DIV2
DIV4

Any help is appreciated.

1
  • Please, consider using JSFiddle for live examples.
    – ZenMaster
    Nov 7, 2011 at 6:14

3 Answers 3

3

Here's a vertical animated version, that is relatively positioned and fairly flexible.

http://jsfiddle.net/bryanjamesross/RgGyF/

1
2

You can use

$('divSelector').click(function()  
{  
    $(this).parent().prepend(this);  
});
1
  • Rather than attaching a separate event handler to each div with click, this would be an ideal situation to use event delegation in. Just use .delegate() to attach a single event handler to the container that holds the divs instead of using .click() to add an event handler to each div. Nov 7, 2011 at 7:22
0

If you don't need animation, then you can move the DOM elements around with this: http://jsfiddle.net/japanick/jx945/

If you need animation, you can absolutely position the elements, and move them using the CSS top attribute in jQuery.animate().

1
  • And if you need animation then here is the example with images, which you can replace with your divs jsfiddle.net/rNzf7
    – Maheep
    Nov 7, 2011 at 6:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.