Question

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 columns 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

Answer 1

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.