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.

enter image description here

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.


1 Answer 1



Here is an example solution, I suggest you keep the column width static. As having the whole table change width might be a bit unsettling (assuming that there are more columns).

  • I picked up your design and improved it like this: codepen.io/lopis/full/LoFCn
    – ecc
    Aug 29, 2014 at 22:03
  • That is looking good. I hope that box next to money is going to be an arrow pointing downward, or some sort of an indicator to show the user an action is possible by clicking on it. Aug 30, 2014 at 12:41
  • In my actual project, there is a glyphicon plus sign, but I was lazy with this codpen ;)
    – ecc
    Aug 30, 2014 at 13:21

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.