• View
• Edit
• History
• Attach
• Print
• Backlinks

ToggleHide

Questions answered by this recipe

How can I add click-able links to toggle display of sections of a page?

Description

This recipe allows the user to add any number of togglehide directives to a page.

Notes

Download the zip file and install in the wiki cookbook and pub/togglehide dirs.

Add the following line to your local/config.php:

include_once("$FarmD/cookbook/togglehide.php");

Users add a togglehide directive with parameters:

  (:togglehide targetid default=show|hide 
    showtext="Show widget" hidetext="Hide widget" 
    showflyover="Will show this widget" hideflyover="Will hide this widget"
    showimage="IntermapLink:Path/to/image-like-arrowdown.jpg"
    hideimage="IntermapLink:Path/to/image-like-arrowup.jpg"
    float=left|right|none focustarget=focustargetid:)

targetid is the id of the block to toggle

default=startup link text selector (default is hide). Does not alter target element.

showtext : default="Show"

hidetext: default="Hide"

showflyover: (optional) sets the title attribute of the anchor element to generate a flyover for showtext

hideflyover: (optional) sets the title attribute of the anchor element to generate a flyover for hidetext

showimage: markup format. If showimage is set and showtext is not, then the default showtext does not apply (image only)

hideimage: markup format. If hideimage is set and hidetext is not, then the default hidetext does not apply (image only)

float: default="right". Specifies the float rule for the toggle link (not the target block).

focustarget: default = blank. focustarget specifies the element id of the element to which to return focus after the toggle operation

A typical usage would be

(:togglehide explanation showtext="Show Explanation" hidetext="Hide Explanation":)

!!!An interesting explanation

(:div id=explanation style="display:none":)

This is an interesting explanation

(:divend:)

In the above example the "Show Explanation" link would be a right-floating link beside the !!!An interesting explanation title.

Release Notes

2008-5-1

First release

2008-5-28

Added showflyover and hideflyover to set the title attribute of the anchor element

2008-5-29

Added showimage and hideimage to add optional image to anchor text

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

See Also

• Toggle - The script adds markup for links, buttons or images for toggling (hiding/showing) elements (sections/blocks/etc.).
• UnToggle - A show/hide switch where the contents is visible even for browsers with JavaScript disabled.

Contributors

Comments

What is the difference to togglelink (see ShowHide)? - HansB May 14, 2008, at 05:17 PM

- It's simpler. togglehide doesn't support buttons, doesn't support toggle between two blocks, doesn't support cookies (ie no persistence), doesn't support a print variation, and doesn't initialize the display rule of the target block. It really just does one thing: toggle display. There are also some internal implementation differences: mostly, the javascript is linked (cached), not loaded. Finally, the link can be floated (left, right, or not), and the focustarget parameter allows return of focus to a specified independent block. The latter is useful for forms that contain textarea elements (toggling help in an edit form for instance). - HB

I tried adding Togglehide but it didn't provide the action. The Hide link appeared (although I think the default should be the Show link), but when clicked, nothing happens and the message just stays hidden. Since the link is formed, the recipe is installed, and I checked the js was placed in pub. The following content is under the Hide link:

javascript:toggleObj('','hide','Show','Hide','','0','')

I tried just copying and pasting the example given above, but it just behaved in the same way, and also showed Hide rather than Hide explanation in the link. Des June 09, 2008, at 06:12 AM

- Hi Des. I think you must have installed the wrong recipe, as togglehide does not have a toggleObj javascript function. Therefore writing the above example markup would have no effect. I just did a Google search, and Hans' toggledictindex.php writes such a function (toggleObj) so perhaps that's what you installed. http://www.pmwiki.org/wiki/Cookbook/DictIndex. Try installing the togglehide recipe per the instructions above. - June 15, 2008. HB

Thanks for the reminder, the install was fine. That I can manage, what I failed to take remember at the time was the long established installation of the earlier ShowHide recipe which I already use. When I disabled this in the wiki config file, then ToggleHide worked just fine, so it seems the two can't exist together. I do use DictIndex, but not the toggle version, so that didn't apply. Thanks for the hint. Des June 16, 2008, at 03:18 PM