|
Cookbook /
ShowHideSummary: Adds toggle buttons and links to show/hide sections and objects
Status: beta
Version: 2007-06-01,(2007-06-01 togglelink)
Prerequisites: pmwiki-2.1.16
Maintainer: DaveG
Categories: Layout
Download: showhide.phpΔ
Download: togglelink.phpΔ
Example: ShowHide Popup BoxAn absolutely positioned div.
QuestionHow can I add toggle switches to show and hide sections of the page? AnswerThe script showhide.phpΔ adds the markup The script togglelink.phpΔ adds the markup Download either or both and copy to cookbook folder. Install by adding to config.php: include_once(" $FarmD/cookbook/showhide.php");
include_once(" $FarmD/cookbook/togglelink.php");
Examples:
Nested toggled divs:
First Division First div content Second Division Second First Division Second First Division content Second Second Division Second Second Division content You can see a test page on my site here: ToggleTest Multiple Necessary parameter:
Optional parameters:
config.php parameters
The buttons have css style hooks inputbutton and showhidebutton. Upgrade notesIf after upgrading the recipe fails to work update your template file (pmwiki.tmpl) as follows:
NotesNote 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 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. Updatesshowhide.php
togglelink.php
Comments
This is now implemented via the browser's print function (not with action=print!!) as default for showhide and togglelink. HansB June 01, 2007, at 09:30 AM
The effect I'm looking for here is like a directory tree where you see a + button next to the name of a directory (to indicate that there are subdirectories that are not being displayed). If you click on the + button, the hidden subdirectories are revealed and the + button toggles to a - button (to indicate that the subdirectories can be hidden). --Pico
This would be nice, but for it to work we would need the ability to nest divisions, but currently pmwiki is not allowing this. ~HansB
Update: FWIW, PmWiki 2.1.12 introduces nested divs (this may be more relevant to the issue of adding a showall and hide all option than to the comment about buttons, which really had to do with the look of the button, rather than the functionality)Pico August 08, 2006, at 08:51 PM
You could change the list of defaults in the script. ~HansB
The markup calls the main function which loads javascript into the html head. But if the markup is in the sidebar, the javascript doesn't get loaded, for reasons I don't understand. Since you wish to use the toggle buttons, or links, in the sidebar, the javascript would possibly need to load for all pages. So I propose you modify the script by moving the $HTMLHeaderFmt code outside the main function. That way it will always load the script part, and the toggles should work. ~HansB
Hmm, this did half the trick for me. My only problem is that I intended for the text to be hidden initially, and this adds $HTMLStylesFmt for display:none; but again when this occurs in the sidebar it is not loaded for some odd reason. I can't move this out of the function though for obvious reasons. Perhaps this is worthy of a PITS?
Well we heard now from Pm that we can't put anything into the html head from markup inside the sidebar or rightbar, since the head is already done by the time that markup is processed. So here is another way: Move the HTMLHeaderFmt code outside the function as I suggested above, to load the javascript part. Create a class .hidediv {display:none;} in css/local.css for instance, and insert into the div which needs initial hiding this additional class name, for instance >>id=box1 hidediv<<. This way the toggle markup is not responsible for initial hiding, but the hiding is done directly to the div. ~HansB
Haha - great idea, it works, thanks so much!
If you do not wish to modify anything you can simply do >>id=sidebardivname display=none<< ... >><< with (:showhide div=sidebardivname init=hide:), which seems to work fine and has the div initially hidden in the sidebar. (This is with pmwiki-2.2.0-beta44) -- Feral May 03, 2007, at 06:55 PM
One way of getting around the problem (not a simple way, though, but perhaps useful for some other purposes) would be if there was a way to set a cookie whenever I show or hide something like this, maybe? Then you could move from page to page and still have the div shown or hidden based on what you did on a previous page. It could be useful for toggles like the sidebar toggle in the Triad skin, for example; you could hide it on one page, then continue browsing with the sidebar still hidden. - JonHaupt
This does not make it any easier, but it may be a useful road to explore someday. ~HansB
I added class=toggle to the <span> tag surrounding the <a> link tag. You can for instance use in pub/local.css:
span.toggle a:link {color:red;
text-decoration:none;
background:yellow;
padding:3px;
border:1px solid #999; }
span.toggle a:hover {color:blue;
background:#def; }
This will result in semi-button looking links. ~HansB August 09, 2006, at 03:01 PM
I have to toggle a Wiki-Style invisible or not. Example: %id=id_for_hide%part to hide%%
The problem is, if I want to use showhide to toggle it on or out it will be created a new block. After some searching I found out you toggle from display='none' to 'block' and vice versa. DWin - 18-Feb-07 My solution: I added two other attribute: display and display2. They are set by default to block but can be changed, for example to inline. See here for other display-attributes: http://en.selfhtml.org/css/eigenschaften/positionierung.htm#display showhide_with_display-attributes.phpΔ I also want to have the ToggleButton should switch itself off
DWin - 18-Feb-07
You don't mention having added the 'include' lines to your config.php file. If not, see the required lines given above the first example above, at the beginning of this page. Des July 19, 2007, at 10:15 AM
I had done that, but the file did not have the correct rights set. Now it is working. One other question:
Any ideas on the nested toggles? (no buttons?) Jul-30-2007.
2007.07.30; Yes... just take the Nesting BUTTON example above and replace "showhide" with 'toggle'! Exactly what I've done.
2007.07.30; Sometimes the answer is easier than I could have imagined. It works now. Thanks for the pointer.
Why does the recipe use id, rather than class? I'd like to hide and show more than two things on a page?
I really appreciate this recipe and use it extensively. I'm trying using it in a sidebar, and each time the page changes the divs in the sidebar resume their default settings. Is there any way of preserving the state of the show hide divs in the sidebar, thanks Simon
works great as optional parameter to the directive on a page, not sure about setting it in config.php though (could be useful to set for all uses though)
3-Jun-2008: I have been trying to get this to work on our build, but am not having much luck. The javascript function is not getting loaded in the header of our Wiki, and as a result, I get a javascript error: "showHide not defined". I have reviewed our pmwiki.tmpl file, as suggested in the Upgrade section above, but this was no help either. Can anyone offer any other advice? Thanks Adam The skin tmpl file needs a
if($tog=='show') {
$label = htmlspecialchars_decode($opt['lhide']);
$tog = 'hide';
}
elseif($tog=='hide') {
$label = htmlspecialchars_decode($opt['lshow']);
$tog = 'show';
}
So it works fine See Also
ContributorsSandboxNested toggled divs:
First Division
Second Division Second First Division
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 |