Questions answered by this recipe
How can I add click-able links to toggle display of sections of a page?
This recipe allows the user to add any number of togglehide directives to a page.
Download the zip file and install in the wiki
Add the following line to your local/config.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:)
(:togglehide explanation showtext="Show Explanation" hidetext="Hide Explanation":)
An interesting explanation
In the above example the "Show Explanation" link would be a right-floating link beside the
!!!An interesting explanation title.
- First release
- Added showflyover and hideflyover to set the title attribute of the anchor element
- 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".
- Toggle - The script adds markup for links, buttons or images for toggling (hiding/showing) elements (sections/blocks/etc.).
What is the difference to togglelink (see ShowHide)? - HansB May 14, 2008, at 05:17 PM
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:
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
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
User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.