"Responsive" - Client-side Furling and Unfurling (fully expanded, print layout) of a Tab Widget/Control

This example wires up matchMedia to auto-furl and unfurl the tabs using '(min-width: 482px)' as the threshold.

To test drive, fiddle with the width of you browser window/viewport. If your browser supports the matchMedia API then you should some furl/unfurl action when the width vacillates above and below 482 pixels.

It's just a demo with some obvious shortcomings. For example, the toggle can get out of synch and does not properly unfurl on load, in a "mobile-first" context.

Kendo UI TabStrip Widget


jQuery UI Tabs Widget



Blog post: Tabs Widget Print Layout Toggle .

View the page source to see what's going on. The main toggle logic all takes place in one method named toggleFurlUnfurl, and is exposed globally as dbpa_Utils.tabstrip.togglePrintLayout. The JS module code is all in 0dbpa_TabToggleDemo.js. Next possible steps: