Can jquery reposition and resize divs

I have a page with a header, footer, and middle area. The middle is 3 equal columns, each 33% width.

When a column is clicked, I'd like for that column to climb above the 2 other columns and get a width of 100%, and the 2 c开发者_JS百科olumns to redistribute to 50-50.

• Is this sort of thing possible (and reliable) with jquery, or is it too much of a hassle?
• Can it be done with animations?
• Any examples

---

Yes it can be done:

$("#column1").css("width", "100%");
$("#column2, #column3").css("width", "50%");

And to move the column to the top, you can do something like this:

$(column).parent().prepend(column);

I've put together an example here on jsFiddle for how to do it on the click of the div.

jQuery is probably the most reliable way to do it as it's written to be cross browser compatible.

Take a look at the document for the css method here.

---

http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery

Check out example B as I think that's what you're looking for. I don't have a lot of experience myself with jQuery so unfortunately this is the best advice I'm going to be able to give you.