FAQ Show-Hide Action Documentation

>>>This Action has been migrated into the Mootools Suite and is no longer available as an individual download<<<

See ChangeLog

Purpose:

To add the ability to 'hide' text and content until the user calls for it by clicking on the 'header' text. Action will degrade nicely so the content is always available to the user, even if CSS or Js is disabled.

Application:

May be applied to HTML Items and Table Cells.

Requirements:

Content of the HTML Item or Table Cell must have a 'hard return' between the 'header' and the 'body'

 

Actual content of Header and Body is not that important, as situations link the Header being an image and the Body being a Table are supported.

 

Show/Hides may be nested. But current limitations of moo.js prevent smooth operation. Normal, non-moo,js Show/Hides should be used in this case until the incosistency can be worked out. The issue is with the moo.js library, not the Action.

Interface:

+Activate: Enabled or disables the output from this Action without having to remove it from the item.

+Addon Text: i.e.'Click for More Information' Text that will appear next to the Header only when the users' browser is capable of handling the show/hide functionality to begin with.

+Initially Hidden - Determines whether content is initially hidden.

Make Text into Link - Makes Header into genuine <a> link that will take on the page styling for hyperlinks.

+Make Header into Link: Convert s first line into real <a> tag that will take on the page styling for hyperlinks

+Use {display:none} - An ADVANCED CSS option that determines whether the property of {height} or {display} is used to hide the content from the user. If you are not concerned about the actual CSS code used, then ignore this option.

-----

+Use moo.js: Use JS moo Library instead of CSS toggling. Provides Accordion options as well as smoother transitions

+Group: Defined to which Accordion Set the Show/Hide belongs. No set = standard toggle

Advanced moo.js Options

+Duration: Defines how long the transition form hidden to visible takes

+Height: Defines whether height will be toggled when show/hide is toggled. If unchecked, the Show/Hide will not collapse. Accordions always use Height, so option is disabled when using a moo Group

+Opacity: Defines whether opacity in faded in/out with show/hide operation

-----

+Open Accordion on Page Load: Defines whether Accordion automatically opens on page load.

+Open This item on Page Load: Defines which item in an Accordion Set opens on page load.

{Group Notice}: Reminder about groups sharing settings among themselves. Any change to one item in a group affects all items in the group.

{Resync Group}: Used to realign group setting among items. This really should not be necessary as normal procedure os for the group to automatically update during routine usage and page publishing.

EXAMPLES:

TABLE CELL:

Simple 4-cell table, each with the Show-Hide Action applied. Table could be a non-layered, or inflow Table like following active example. Notice the size of the Table Cells remain intact (except for the minor text size inconsistencies between browsers).
 

The Table can be made to collapse by either choosing 'Height can shrink' in the Inspector, or by Applying the 'Collapse Table' Action (available on the main page) if the 'Height can shrink' option is not available. This has been applied to the second example below. Notice how the least amount of space required is used by the Table.

SNAPSHOT:

EXAMPLE 1:

Example 2: Shrink option applied

HTML ITEM:

HTML Items work a bit differently, as the option for collapse is not 'built-in' as with the Tables. Non-layered HTML Items have the same option, 'Height can Shrink' as Tables. Layered HTML Items (or Inflow HTML Items) need to have their 'Height' value removed from the Inspector. this can be accomplished by deleting the value shown in the Inspector field and pressing the tab key. the goal is to have a field that is blank.

HTML Items may be drawn as freestanding or inflow items. Inflow items naturally will nestle toward each other and collapse nicely. Freestanding items take some care in design.

Layered, freestanding items cannot collapse into each other. This will never happen.

Non-Layered, freestanding items should have the 'Height can Shrink' option ticked and be positioned one directly below another. This should cause the output to shrink and collapse nicely. HTML Item Layout See Working Example Page

Summary

There may be situations where the above HTML method still does not provide the expected results. the safest design is to use either a Table or a large HTML item and insert the areas that you want to collapse as inflow items.

License/Usability:

Each download of this action is meant for a single, licensed copy of Softpress Freeway. Please do not share these commercial versions.
I will provide support to the best of my abilities through the email address provided. However, there may be circumstances where this Action fails to perform. I have made every effort to prevent this, but I cannot foresee every possible circumstance and use of this Action. I cannot be held responsible for lost work or time due to use of this action.
Please contact me for upgrades to this Action. Similar version updates and bug fixes will be provided at no cost. Contact me and I will send you the most recent version.
No refunds will be given. However, I will try my best to work with you to solve any issues you may have. 'Coastal Designer Rugs' is the family business for which I work. This is effectively a pseudo name, and a matter of convenience as the business already has this PayPal account established.