0

Recently I've spent a few minutes tracking down a bug in my code investigating why JQuery's .show() does not show one of my originally invisible element. As it turned out, JQuery .show() and hide() switch the display:none and my element was hidden by visibility:collapse.

OK, bug is solved, however I am wondering is there any difference between display:none and visibility:collapse?. (I do understand what is the difference between visibility:hidden and visibility:collapse).

Also I am wondering if there is no difference which is the preferred?

g.pickardou
  • 32,346
  • 36
  • 123
  • 268
  • see the definition in https://developer.mozilla.org/en-US/docs/Web/CSS/visibility – Arun P Johny Aug 07 '15 at 08:26
  • For table rows, columns, column groups, and row groups the row(s) or column(s) are hidden and the space they would have occupied is removed (as if display: none were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This was designed for fast removal of a row/column from a table without having to recalculate widths and heights for every portion of the table. – pawel Aug 07 '15 at 08:26
  • 1
    @ShijuKBabu: you are right. Sorry for the dupe, I definitely searched both google, both SO, with pretty selective keywords like difference display none, collapse and there was no result... – g.pickardou Aug 07 '15 at 08:30
  • If I type `difference display none, collapse` into google, the other question is the first result. Oh, and the second result is [a similar SO question](http://stackoverflow.com/q/133051/1016716) from 2008. – Mr Lister Aug 07 '15 at 12:05
  • @MrLister: You are right, my bad, I do not understand how could I missed it... – g.pickardou Aug 07 '15 at 12:06

0 Answers0