I have a business requirement to hide divs as the screen collapses. For example, I have a toolbar loaded with divs in which some divs are buttons containing text and an icon. Other div buttons have only an icon, no text. For the div/buttons that contain both text and an icon, if the browser window becomes narrower than the width of the toolbar, I need all text inside div-buttons to hide/collapse, leaving only the icon. And then if the browser window becomes larger again--large enough to accommodate the full toolbar--I need the text inside the div-buttons to expand/reappear.
EXAMPLE - original toolbar:
----------------------------------------------------------------------------
[X] Button 1 [X] Button 2 [X] [X] Button 4
----------------------------------------------------------------------------
EXAMPLE - collapsed toolbar:
--------------------------------
[X] [X] [X] [X]
--------------------------------
NOTE: [X] represents an image icon.
I can probably figure out some jquery to do this all dynamically, but that seems error prone and could become a rat hole. Is there a CSS approach to this? Perhaps something in which a div (either my outer toolbar div or the inner button-divs) realizes it's out of space, and triggers some kind of style or class at that point?
Important: I can't know the width of the toolbar in advance, it's dynamic and dependent on server events and user settings. Therefore I don't think CSS media queries will solve this.
Am I stuck with a jquery solution?
