Hide 'n' Show stack
When you're showing your photos in large sizes, your visitors might find it annoying that they are covered by the menu and content. Wouldn't it be great if they are able to Hide and Show the content with a simple mouse click? With the Hide ‘n’ Show stack they can...
Hide 'n' Show stack Manual
Using this Stacks set is very simple:
More details
Below a more detailed explanation, click on an item to show/hide it's documentation content.
- Start by adding a Stacks page to your project;
- Add the Hide 'n' Show stack on your stacks page;
- Select the Theme Definition depending on the used Theme;
- Add your "Content" and look at the result;
- Fine-tune the stack settings.
More details
Below a more detailed explanation, click on an item to show/hide it's documentation content.
Edit mode
By default the Hide 'n' Show stack shows an information section to make the identification of the stack easier. When used in small columns or smaller sized screens you can disable it's visibility and with Stacks plugin v2 you can use edit mode "3" to see the names of your stacks.
Start action
By default the selected content elements are Shown on page load, you can also choose from one of the extra options: Hide, Show (delayed) and Hide (delayed).
Toggle and Delay speed
Speed for the Hide 'n' Show effect in milliseconds. Simply drag the slider to a value of zero if you want to Hide 'n' Show the content immediately. In case the Show (delayed) or Hide (delayed) start actions are used you can also select the corresponding delay value.
By default the Hide 'n' Show stack shows an information section to make the identification of the stack easier. When used in small columns or smaller sized screens you can disable it's visibility and with Stacks plugin v2 you can use edit mode "3" to see the names of your stacks.
Start action
By default the selected content elements are Shown on page load, you can also choose from one of the extra options: Hide, Show (delayed) and Hide (delayed).
Toggle and Delay speed
Speed for the Hide 'n' Show effect in milliseconds. Simply drag the slider to a value of zero if you want to Hide 'n' Show the content immediately. In case the Show (delayed) or Hide (delayed) start actions are used you can also select the corresponding delay value.
Theme Definition
Choose from one of the predefined Theme definitions, currently the following definitions are available: Xense Content, Xense Content + Footer, BlowUp Content and BlowUp Content + Footer.
Use Extra Content and EC Area
Select if the stack should automatically be placed inside the selected ExtraContent position as defined in the used theme or if it should fit in the normal stacks layout.
Tooltips
Enter your custom tooltip text that appears when hovering over the Hide 'n' Show content links.
Choose from one of the predefined Theme definitions, currently the following definitions are available: Xense Content, Xense Content + Footer, BlowUp Content and BlowUp Content + Footer.
Use Extra Content and EC Area
Select if the stack should automatically be placed inside the selected ExtraContent position as defined in the used theme or if it should fit in the normal stacks layout.
Tooltips
Enter your custom tooltip text that appears when hovering over the Hide 'n' Show content links.
Color definition,
Text and Hover
color
Select between the color definition of the used Theme or your own Custom colors that are used for the Hide 'n' Show toggle link.
Font definition
Use the Theme definition for hyperlinks or choose your own Font family, note that the required syntax is according the CSS rules. For example: 'Times New Roman', Georgia, Serif.
Font size
Use the slider or click on the number and set the font size that is used for the toggle link.
Select between the color definition of the used Theme or your own Custom colors that are used for the Hide 'n' Show toggle link.
Font definition
Use the Theme definition for hyperlinks or choose your own Font family, note that the required syntax is according the CSS rules. For example: 'Times New Roman', Georgia, Serif.
Font size
Use the slider or click on the number and set the font size that is used for the toggle link.
Font style
Choose between the Theme definition, Bold, Italic and Bold + Italic.
Choose between the Theme definition, Bold, Italic and Bold + Italic.
Theme definition
and Content ID(s)
Set the Theme definition to custom and enter your custom content ID(s) into the corresponding input field.
You can use more than a single ID by separating them with a comma (and a space), for example: #contentsupersized, #myjquerymenu
Accordion definition
You can also use Hide 'n' Show as a basic Accordion/FAQ solution, simply change the theme definition to Accordion and a special drop area is automatically shown at the bottom of the Hide 'n' Show stack. Drag all your content stacks into that area.
Set the Theme definition to custom and enter your custom content ID(s) into the corresponding input field.
You can use more than a single ID by separating them with a comma (and a space), for example: #contentsupersized, #myjquerymenu
Accordion definition
You can also use Hide 'n' Show as a basic Accordion/FAQ solution, simply change the theme definition to Accordion and a special drop area is automatically shown at the bottom of the Hide 'n' Show stack. Drag all your content stacks into that area.
Simply place the Hide 'n'
Show Content stack on your
Stacks page and add your
content into this stack.
Use the Stacks side pane to
set the Content ID so that
you are able to toggle the
visibility of this Hide 'n'
Show Content stack.
Edit mode
By default the Hide 'n' Show content stack shows an information section to make the identification of the stack easier. When used in small columns or smaller sized screens you can disable it's visibility and with Stacks plugin v2 you can use edit mode "3" to see the names of your stacks.
Edit mode
By default the Hide 'n' Show content stack shows an information section to make the identification of the stack easier. When used in small columns or smaller sized screens you can disable it's visibility and with Stacks plugin v2 you can use edit mode "3" to see the names of your stacks.
Content ID
Easily define your own Content ID, note that the used ID should be unique on your page and definitions are without space or # character.
Easily define your own Content ID, note that the used ID should be unique on your page and definitions are without space or # character.
FAQ
All currently known FAQ items are shown below
The new Stacks plugin v2 comes
with a lot of new features for
3rd party developers, one of them
is the new drop-down input
element that we are using in the
Hide 'n' Show stack for the
selection of Theme Definitions
and myExtraContent Area's.
We are adding more Theme
definitions when it's that time,
in case you would like to add
your Theme definition than simply
send a link to an online example
and the elements (ID's) that you
would like to Hide 'n' Show.
Easiest approach is the Hide 'n'
Show Content stack, in case you
would like to add your own
content elements via html then
simply define your elements using
the html ID tag
as for example:
<div id="myElement">Your content</div>
Then in the stack you can use the theme definition: #myElement
<div id="myElement">Your content</div>
Then in the stack you can use the theme definition: #myElement
The normal edit section of this
stack is using styled text input
fields so you are able to use
other content like images. All
text and images placed inside
these fields are automatically
turned into a clickable link to
Toggle the visibility of your
theme content. So also manually
creating links inside these 2
"content" area's is not
supported.
Depending on the used Theme
definition and EC area this can
happen, if the Hide 'n' Show
stack is added into the EC1
(Blow-Up Theme) and you are also
hiding this area than it's
expected behavior.
So what EC area should I use? WIth the Xense Theme you can use EC1 and for the Blow-Up Theme we suggest you use EC4.
So what EC area should I use? WIth the Xense Theme you can use EC1 and for the Blow-Up Theme we suggest you use EC4.
Hide 'n' Show stack
When you're showing your photos in large sizes, your visitors might find it annoying that they are covered by the menu and content. Wouldn't it be great if they are able to Hide and Show the content with a simple mouse click? With the Hide ‘n’ Show stack they can...
This stack started as a much requested solution for the full screen photo Themes from Henk Vrieselaar. So we've themed up with Henk and created some Theme Definitions that are ready to use with this stack. Besides these predefined Theme definitions you can also use your own custom definitions to toggle the visibility of your content items. As from version v1.0.2 you can also create your own content elements using the Hide 'n' Show Content stack.
The stacks set comes with integrated support for ExtraContent Area's as defined in the used theme's, extra placement options are added in future release.
What you get when purchasing this stack:
- An installer for the Hide 'n' Show stacks set;
- RapidWeaver 5 example project;
- Some Hide 'n' Show images to get you started.
- RapidWeaver 5;
- Stacks Plugin 2 or above.
Version
1.1.1, 16
December 2012
New: Outline, XXL and XXL-r theme definitions
Version 1.1.0, 16 September 2012
New: Accordion theme definition, use Hide 'n' Show as a basic Accordion/FAQ solution
Fix: Stack Content not correctly placed into Extra Content Area 3
Version 1.0.2, 14 april 2012
New: Total of 4 start actions, Show, Hide, Show delayed and Hide delayed;
New: Style properties for color and font settings;
New: Different Edit modes;
New: Hide 'n' Show Content stack.
Version 1.0.1, 25 january 2012
New: Automatically hide content on page load
Version 1.0.0
First public release on 20 january 2012.
New: Outline, XXL and XXL-r theme definitions
Version 1.1.0, 16 September 2012
New: Accordion theme definition, use Hide 'n' Show as a basic Accordion/FAQ solution
Fix: Stack Content not correctly placed into Extra Content Area 3
Version 1.0.2, 14 april 2012
New: Total of 4 start actions, Show, Hide, Show delayed and Hide delayed;
New: Style properties for color and font settings;
New: Different Edit modes;
New: Hide 'n' Show Content stack.
Version 1.0.1, 25 january 2012
New: Automatically hide content on page load
Version 1.0.0
First public release on 20 january 2012.