I've been developing a web app that contains a large table. Some of the columns are "nested", in the sense that with a click on a button in the column header, it splits into two, like in the following simple example. First I was simply hiding the single column and showing the other two, but this was not intuitive because the user easily loses track of the columns when they change too fast. I tried adding some animations with jQuery but so far they look a bit odd, hiding and showing at the same time. I decided to turn to you before proceeding, in hopes you have any tips of good examples of this kind of user interaction.
Edit to add: to be more clear, my question is how to hide a column and show two others in an intuitive, non annoying way, with some kind of animation? I don't have a reason to hide/show columns like this other than the client's request.
