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.



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 '14 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. – Agnish Bala Aug 30 '14 at 12:41
  • In my actual project, there is a glyphicon plus sign, but I was lazy with this codpen ;) – ecc Aug 30 '14 at 13:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.