CODEWITHSUNDEEP
javascriptjqueryhtml
Isha Jain
Isha Jain

Reputation: 39

Div's Positioning Change on Click

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.

Upvotes: 2

Views: 202

Answers (3)

rossipedia
rossipedia

Reputation: 59377

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

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

Upvotes: 3

Maheep
Maheep

Reputation: 5605

You can use 

$('divSelector').click(function()  
{  
    $(this).parent().prepend(this);  
});

Upvotes: 2

Nick B
Nick B

Reputation: 7689

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().

Upvotes: 0

Related Questions