ShowHide-Talk

back to ShowHide

Please leave the latest message at the top.

Questions, Comments and Discussion about ShowHide

  • Concerning the question below; I've gone with the include scripting below it. All that is needed is to read-password-protect the included page using the password utility of that page. I've left the question for the manager to delete, since it still would be great to be able to include password scripts with show-hide, and perhaps other recipes. Thanks, Jagtig

  • Is it possible to include a password protect script such as Zubrag's or PhpBuddy so that the show hide brings up a user-password text box?

Wouldn't it be great to place material that you want to be handy for development behind show-hide buttons? You could then open it once, and it would be available for use as long as the password protect cookie was on your computer. However, visitors could not see what was there. Thanks a million.


  • I'm using this in my page:
(:toggle div=box1:)
>>id=box1<< 
(:include groupname/pagename#from#to:)
>><<

Which works well to show the included page - provided the included page does not include markup for the WikiStylesPlus recipe. If the included page has markup such as

>>tip<<
Take regular breaks to avoid eye-strain
>><<

Then the Show/Hide toggle only works until it reaches the WikiStylePlus markup - after which the included text is displayed - even though the toggle is set to hide.

I'm not sure if this a Show/Hide feature, or WikiStyles or the "include" recipe that is causing this. I did try taking out the "offending" WikiStylePlus markup, but as I can't control another author putting such markup inthe page again later - I amlooking for a more robust solution. Any ideas?

HansB: It seems that the div markup of the included page closes the div of the toggle box div. Try to give the toggle div a "special identity" which allows nesting, like this (the numeric value after 'div' is not importent, but it must be matched in the ending markup, it is not a HTML id:

(:toggle div=box1:)
(:div0 id=box1:) 
(:include groupname/pagename#from#to:)
(:div0 end:)
  • corrected above to put space between 0 and end in "div0end"; also in experimenting found what most may know: divLT is not valid (chars) div1010031820 is, i.e. must be numbers. Ward Christensen October 03, 2010, at 06:22 PM
  • I've noticed that when an anchor has the same name as a div toggling fails - RandyB February 21, 2009 at 2:48 AM
True. The toggle works on an element by identifying its id. Elements are not restricted to divs, but need to have a unique id set. - HansB February 21, 2009, at 03:54 AM
  • Question mark bug: This is a very useful recipe, but when you click on the next sentence, the special character turns into a question mark. (:togglelink div=mydiv lshow="Is that right?▼" lhide="Is that right?▲" init=hide:)

Where did '▼' go? I've tried various ways of escaping the characters, to no avail.

  • DaveG When I click the link, I alternate between up and down arrows. Can you confirm that it still doesn't work for you?
  • RandyB? I confirm that it doesn't work for me, even though we are using the same server. Could it make a difference whether the client machine is a PC versus Mac?
  • DaveG Could be. I'm on a PC. It's obviously related to the font. Does whatever font the Mac is using support fully Unicode? On the PC that label is represented using Arial. This page might help work out [(approve links) edit diff], and this [(approve links) edit diff].
-- RandyB January 28, 2009, at 8:01 PM
  • Escaping an apostrophe: An apostrophe breaks the label code. For example "It's not a valid label" doesn't work. Is there a way to get around that? -- RandyB January 28, 2009, at 8:01 PM
    • DaveG: Try a backslash before the quote. "It\'s not a valid label"
    • RandyB?: I tried that. Here's such a label: (:togglelink div=test lshow="It\'s not working" lhide="It\'s not working" init=hide:)
At first the escape character is incorrectly visible in the label. Then when I show this text, the label becomes correct (the escape character disappears) but toggling stops working.
  • DaveG: Looks like a bug. I couldn't find a work-around, so I'll post a fix in a few days.
  • Now fixed. - HansB February 16, 2009, at 01:33 PM
  • It's still not working on my machine. The new version shows the apostrophe at first, but changes it to an odd character when I go from hide to show state, and thereafter the apostrophe becomes a question mark regardless of state. I'm using a Mac. - RandyB February 16, 2009
    • I try to investigate further. It has so far been quite difficult for me to find a way to pass special characters from php to javascript to HTML.
  • Print view: Is there a way we could use the print template/skin so that all of the elements being hidden with this recipe could be shown? Like a global switch to show everything regardless of the options in the markup? This would be really useful when printing something out. --lordmundi May 25, 2007, at 01:09 PM
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
  • Naming a div id. Watch out for Uppercase characters. If your first character is uppercase, then all the rest must be in lowercase (Abc). Additional capitals (ABc and AbC) will cause the markup to fail. If your first character is lowercase, however, then you can have multiple uppercase characters (aBC). --Pico
  • Buttons. The show and hide buttons look really nice. For some purposes, however, it would be even better if we had an option that allowed a directory tree style of toggled buttons that can appear on the same line with some text (or the labelname).
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
  • No longer an issue with version 0.3, because the button can be placed inline. Using "+" and "-" for the labelnames creates a pretty decent result. Now, with the addition of togglelink markup, there are even more options. --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
  • Default Parameters. It would be nice if we could set the default parameters so that each markup did not have to restate them.--Pico
    • Note, I was thinking about the markup for the toggle button (and link), but for the division, wikistyles will work fine. What I was looking for was something like wikistyle that could be used for the non-division markup (the toggle button and link). Pico
You could change the list of defaults in the script. ~HansB
I tried the above suggestion, but apparently the script's logic is based on the default being 'show', so you'd have to rework the code. Add me to the list of those who would like the default to be configurable. - RandyB February 15, 2009 at 9:12 PM
  • Sidebar. I thought this would make a good new version of Expanding Menus, but for some reason this recipe doesn't seem to work when the button doesn't appear in the main part of the page... any idea why that might be the case? What's very strange is if you put one of these in Site/SideBar, you can toggle it when you are browsing that page, but as soon as you go to any other page, it doesn't work. Does this make sense? JonHaupt
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
Hans, could a similar class based approach be used to provide a default display for script disabled browsers? For example, the show and hide links and toggle buttons, could be hidden (unless and until Java kicks in to display them) and the hidden text could be displayed (unless and until they are hidden by script). I added a couple of new links to the end of ViewModes.NestedText for your reference. Pico
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'd like to be able to change the colour of a (:toggle:). Adding a wikistyle only works for the first display of the link. Best, for me, would be a CSS class for the text, since using .wikilink is inappropriate. Marc 5 Jun 06
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
  • Including togglelink.php leads to invalid XHTML. Check on http://validator.w3.org It complains about lines 89 and 98 where something seems to be wrong with
    copy='<a class="wikilink" ';
    The easiest way around this is probably to move the javascript code into a separate file, since it's the javascript that's tripping the validator up. It'd be cleaner that way anyway. - JonHaupt
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
My solution: An additional attribute: swapself
showhide_swapself.phpΔ
  • I copy pasted the sample code from this page into an empty wiki but nothing happens when I click the button (IE and FF). both php files are copied in the cookbook directory and have the correct rights assigned. Any idea? (or anything I can check?) Tnx! DJ jul-20-2007.
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:
  • Does the toggle (with text, no buttons) support nesting as well? When I tried it I couldn't get the main link to close the whole 'tree' when some of the sub-sections were opened. Another thing I run into is that with the non-button toggles I cannot keep a sub-section inside the main sections box, it will create a new box below. The button toggle automatically seems to do this correctly. (It would be great if someone has a code sample) Tnx! DJ Jul-20-2007.
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.
  • Would it be possible to have different colors for the different levels? (in the example if it had toggles instead of buttons: display 'show divisions' in gray and all other links in underline/blue? (small example?) with the span.toggle a: * you can only modify the looks of all links. 05.08.2007
  • Is there any way
    • to show a division if the user follows a link to a point inside it?
    • to show all sections (or generally, more than one section) with one click?
    Thanks. This is a really useful cookbook. / WRF 23 Oct 2007

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

  • 21-Nov-2007: You should be able to add set=1; to config.php, which will remember the state of the div.
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 <!--HTMLFooter--> markup near the end above the </body> tag. If you got this, examine the HTML page source. The javascript function should now be in the HTML page source near the bottom, if the wiki page contains one or more (:showhide ...:) markups. - HansB June 04, 2008, at 09:00 AM

  • Hans - this resolved the issue. I had updated the non-skin template, but neglected to change the file specific to our skin. Thanks very much for your speedy response! Adam June 04, 2008, at 10:34 AM
  • 23-Jun-2008 : For toggle with an image (not with a text)
    I add the code <img src=url /> (without ") in lshow and lhide, but I had to modify the code to add the function htmlspecialchars_decode
   if($tog=='show') { 
     $label = htmlspecialchars_decode($opt['lhide']);
     $tog = 'hide';
   } 
   elseif($tog=='hide') {
     $label = htmlspecialchars_decode($opt['lshow']);
     $tog = 'show';
   } 

So it works fine
Thomas S

Talk page for the ShowHide recipe (users?).