ShowHide Stack

Show and Hide Stacks responsively based on browser width or height.
Overview
ShowHide Stack icon
The ShowHide Stack lets you control the visibility of Stacks depending on browser width or browser height. A handy debug mode shows the client width x height dynamically in case you need to test your responsive design. You may choose to show one or more Stacks above a certain width or height, or show them below a certain width or height.

How does it work?
CSS media queries are used to control the visibility of the div each Stack sits in. Javascript is not used unless you enable the debugging mode which dynamically displays window width x height as you stretch the browser window.
  • ShowHide Stack screen shot
  • ShowHide Stack screen shot
  • ShowHide Stack screen shot
Customize
ShowHide Stack parameters
A very simple set of options control when the Stacks are displayed based on width, and whether you would like to enable the debug mode (handy for testing but should be disabled in your final Publish).

Parameters

Responsive sizeShow content in first stack area if client width or height is greater than this, otherwise show second stack area content.
Check height, not widthEnable this to test height and not width. The default is to check width, so this option is unchecked by default.
Extra edit info?Enable extra information info in the edit window.
Debug size in publish?Enable extra window size debugging info in the preview and published output.
Examples
Check out examples of ShowHide below - Resize your browser both horizontally and vertically to see the effect …
Your client width is more than 800px, so this Text Stack is displayed. Note the debug size information - this may be enabled for test purposes.
Your client width is 800px or less, so this Text Stack is displayed. Note the debug size information - this may be enabled for test purposes.
Your client height is more than 800px, so this Text Stack is displayed. Note the debug size information - this may be enabled for test purposes.
Your client height is 800px or less, so this Text Stack is displayed. Note the debug size information - this may be enabled for test purposes.

ShowHide Features

  • Responsive
  • Requires JS (debug mode only)
  • Sparkle updates

Purchase ShowHide

  • $3 USD via PayPal
  • Immediate download *