Getting Bootstrap Tabs to Play Nice with Masonry

This is a somewhat mis-titled article. Any tabs plugin, or accordion, or anything that creates hidden content areas will produce the same effect. It would be the same with JQueryUI for example. And any javascript that relies on reading CSS from the DOM to style layout on the fly will encounter the same problem. The problem is that hidden content has no height or width so the proportional calculations can’t be made. In any similar system layout javascript needs calling when the size of the content area changes, which in effect is what happens when you show the tab, it’s size changes from 0:0 to whatever its shown state is.