ShowHide
Example:
Latest News
ShowHide and ToggleLink are now combined in the Toggle recipe, offering in one script one markup for both toggle links and buttons, and an easier syntax.
Please consider upgrading to Toggle.
This is an absolutely positioned div.
This recipe depends on javascript.
Question
How can I add toggle switches to show and hide sections of the page?
Answer
The recipes below are no longer maintained. ShowHide and ToggleLink are now combined in the Toggle recipe, offering in one script one markup for both toggle links and buttons, and an easier syntax.
The script showhide.phpΔ adds the markup (:showhide div=sectionname:)
, which creates a toggle button. The button will instantly show or hide a division section or object on the page using javascript.
The script togglelink.phpΔ adds the markup (:toggle div=sectionname:)
, which creates a toggle link instead of a button, with the same function as the showhide toggle button.
Download either or both and copy to cookbook folder. Install by adding to config.php:
$FarmD
/cookbook/showhide.php");
$FarmD
/cookbook/togglelink.php");
For PHP 5.5 or more recent please get showhide-php72.phpΔ and togglelink-php72.phpΔ instead (should also work in earlier PHP versions, requires PmWiki 2.2.58 or newer).
(:showhide div=box1 init=hide:) >>id=box1 border='1px solid #999' padding=5px bgcolor=#edf<< The text in this section can be hidden/shown >><< |
The text in this section can be hidden/shown |
(:toggle div=box2:) >>id=box2 border='1px solid #999' padding=5px bgcolor=#fed<< The text in this section can be hidden/shown >><< |
The text in this section can be hidden/shown |
Nested toggled divs: (:div0 style='width:540px; border:1px solid #999; padding:5px; background-color:#def':) (:showhide init=hide div=div1 lshow='Show Divisions' lhide='Hide Divisions':) (:div1 id=div1 :) (:showhide init=hide div=div11 lshow='+' lhide='-':) First Division (:div11 id=div11 style='width:500px; border:1px solid #999; padding:5px; margin-left:25px; margin-bottom:10px; background:#fed':) First div content (:div11end:) (:showhide init=hide div=div12 lshow='+' lhide='-':) Second Division (:div12 id=div12 style='width:500px; border:1px solid #999; padding:5px; margin-left:25px; margin-bottom:10px; background:#fed':) (:showhide init=hide div=div121 lshow='+' lhide='-':) Second First Division (:div121 id=div121 style='width:460px;border:1px solid #999;padding:5px;margin-left:25px; margin-bottom:10px; background:#ffd':) Second First Division content (:div121end:) (:showhide init=hide div=div122 lshow='+' lhide='-':) Second Second Division (:div122 id=div122 style='width:460px;border:1px solid #999;padding:5px;margin-left:25px; margin-bottom:10px; background:#ffd':) Second Second Division content (:div122end:) (:div12end:) (:div1end:) (:div0end:) |
Nested toggled divs:
First Division First div content Second Division Second First Division Second First Division content Second Second Division Second Second Division content |
Multiple (:showhide div=... :)
or (:toggle div=... :)
markups are possible on a page, to create multiple toggle buttons for switching various sections independently.
Necessary parameter:
- div = divisionname name of division which the toggle button acts on
Optional parameters:
- init = hide hides the division initially (default is show)
- lshow = labelname label of button when div is hidden (default is Show)
- lhide = labelname label of button when div is shown (default is Hide)
- div2 = divisionname name of an optional second div which the toggle will show when hiding the first div, toggling between the two divs.
- set = 1 remember toggle state with a cookie (ToggleLink only)
config.php parameters
- Arrays $ShowHideConfig and $ToggleLinkConfig for setting defaults.
The buttons have css style hooks inputbutton and showhidebutton.
Upgrade notes
If after upgrading the recipe fails to work update your template file (pmwiki.tmpl) as follows:
- replace <!--HeaderText--> with <!--HTMLHeader-->
- replace <!--/PageFooterFmt--> with <!--HTMLFooter-->
Notes
Note that pmwiki does allow nesting of divisions from pmwiki 2.1.12, so it is now possible to toggle nested sections.
The script requires a javascript enabled modern browser. It places a javascript function into the html header, which will achieve instant toggle effects without page reloads.
A toggle button can act on any named division of the page, even a sidebar or other structural division outside the normal page content. But in such a case it may not make a too good job, because to hide such a div effectively may need more than applying display:none
, for instance resetting of margins.
A toggle button can also act on other objects with an id= set, for instance tables. It is not restricted to divs.
A toggle button or link can toggle two divisions or objects, hiding one and showing the other, alternating. Name the first division or object id with div=... and the second with div2=...
Two toggle buttons or two toggle links can act together as a pair on one div. For instance put one on top of the div, and the other inside at the bottom, to conveniently close it. But note that the label or link text of the second one will be displayed on the first one when clicked, so use the same labels for both. And if the div shall be initially hidden, place init=hide into the first markup and not the second.
Updates
showhide.php
- 2009-03-06: No further development. ShowHide and ToggleLink are now combined in the Toggle recipe, offering in one script one markup for both toggle links and buttons, and an easier syntax.
- 2009-02-16: Added $ShowHideConfig array for default settings. Changed $EnablePrintHiddenDivs to $ShowHideConfig['printhidden'] (default is true). Fixed 'Escaping an apostrophe' bug.
- 2007-06-01: Added var $EnablePrintHiddenDivs (default is true) which allows initially hidden divs to be printed via the browser's print function.
- 2007-01-06: Changed function to load javascript with HTMLFooterFmt. The skin tmpl file needs
<!--HTMLFooter-->
before the</body>
tag near the end of the file. Note that some skins are not updated yet to support$HTMLFooterFmt
. - 2006-10-28: Added $RecipeInfo
- 2006-08-19: Added variable so presence of showhide can be detected. This is useful for the latest versions of Gemini?, FixFlow? and Triad skins?, as they use showhide for their popup edit form, and could not detect an existing installation previously, resulting in a fatal error.
- 2006-023-07: v.0.4: Added support for div2= parameter to specify a second div to be toggled with first div.
- 2006-03-04: v.0.3: buttons are wrapped now in <span> tags, not <div>, so they can be placed inline. Added internationalisation of default labels.
- 2006-03-04: v.0.2: streamlined & compacted code.
- 2006-03-02: version 0.1: initial release.
togglelink.php
- 2009-03-06: No further development. ShowHide and ToggleLink are now combined in the Toggle recipe, offering in one script one markup for both toggle links and buttons, and an easier syntax.
- 2009-02-16: Added $ToggleLinkConfig array for default settings. Changed $EnablePrintHiddenDivs to $ToggleLinkConfig['printhidden'] (default is true). Fixed 'Escaping an apostrophe' bug.
- 2007-06-01: Added var $EnablePrintHiddenDivs (default is true) which allows initially hidden divs to be printed via the browser's print function.
- 2007-03-22: Added parameter set=1 to set toggle state with cookie (remember the toggle state).
- 2007-01-06: Changed function to load javascript with HTMLFooterFmt
- 2006-10-28: Added $RecipeInfo
- 2006-08-09: added class=toggle to <span> tag for css styling hook of links. Use
span.toggle a:link
andspan.toggle a:hover
- 2006-03-07: v.0.3. Added support for div2= parameter to specify a second div to be toggled with first div.
- 2006-03-05: v.0.2. rewrite to fix the bug with init=hide.
- 2006-03-05: version 0.1. initial release.
See Also
- Toggle recipe combining showHide and ToggleLink in one script and markup, plus adding more features.
- FAQ Toggle List adding toggle buttons to a definition list like FAQ
- ToggleHide
- UnToggle - A show/hide switch where the contents is visible even for browsers with JavaScript disabled.
Contributors
Sandbox
Nested toggled divs:
First Division
- First div content
- second list item long line of text long line of text long line of text long line of text long line of text long line of text long line of text
- third list item
Second Division
Second First Division
- Second First Division content
- second list item long line of text long line of text long line of text long line of text long line of text long line of text long line of text
- third list item
Second Second Division
Second Second Division content
Hans or anyone,
I'm back for more. I've been playing with the show/hide function and this is what I have so far:
Remember that you may not post any content that could be considered rude, offensive, slander, or otherwise harmful to the community that will be reading all posts.
That text does not float above my content and is almost just another part of the website. I would like a dark grey or blue box with red text that hovers over the content of a page with that text that could show/hide. Is there a way to get that to work?
As always, thanks (sorry, I accidently posted this message 2x)!July 24, 2008, at 18:06 PM text= (:toggle div=box1 style='position:absolute;top:100px;left:100px;width:400px;':) >>id=box2 border='1px solid #999' padding=5px bgcolor=#edf<< Remember that you may not post any content that could be considered rude, offensive, slander, etc. >><<
-Chris
The style=.... needs to be in the div markup, not the toggle markup. HansB July 24, 2008, at 01:13 PM
Thanks, I got it fixed! -Chris
Versions in ShowHide and ToggleLink scripts do not match version on this page, causing SiteAnalyzer to detect a difference.
For headings, you can do this:
!!! (:toggle div=boxx style='position:absolute;top:100px;left:100px;width:400px;':) >>id=boxx border='1px solid #999' padding=5px bgcolor=#edf<< Remember that you may not post any content that could be considered rude, offensive, slander, or otherwise harmful to the community that will be reading all posts. >><< |
HideRemember that you may not post any content that could be considered rude, offensive, slander, or otherwise harmful to the community that will be reading all posts. |
-eiro.
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.