This is a talk page for improving Toggle.
Please leave the latest message at the top.
I had to replace "div=" with "id=" in the latest version to get the recipe to work
simon February 11, 2017, at 05:06 PM
Denning Services, battzion.org , 20160202-12:35GMT-06
'''This example works, but is in Grey and not the defined #660000 or #4e0e19:
!![-(:toggle id=FontLinks01 init=hide button=0 hide="Hide Web-Fonts" show="Installed Web-Font Kits" :) -] >>id=FontLinks01 border='1px solid #999' padding=2px bgcolor=<<
I have tried editing the Local CSS, Skin CSS, inspected the Web-Font Kit CSS, and Toggle PHP definitions. Something eluded me.
FIRST, A LITTLE WIKI MARK-UP: !!%color=#660000%[-(:toggle id=FontLinks01 init=hide button=0 hide="Hide Web-Fonts" show="Installed Web-Font Kits" :) -]%% !![-%color=#660000%(:toggle id=FontLinks01 init=hide button=0 hide="Hide Web-Fonts" show="Installed Web-Font Kits" :)%% -] !![-(:toggle id=FontLinks01 init=hide button=0 hide=%color=#660000%"Hide Web-Fonts"%% show=%color=#660000%"Installed Web-Font Kits"%% :) -] !![-(:toggle id=FontLinks01 init=hide button=0 hide="%color=#660000%Hide Web-Fonts%%" show="%color=#660000%Installed Web-Font Kits%%" :) -] NEXT, A LITTLE IN-LINE HTML DIRECTIVE MARK-UP: !![-(:toggle id=FontLinks01 init=hide button=0 hide="(:html:) <span class=shalomnormal1> Hide Web-Fonts </span> (:htmlend:)" show="(:html:) <span class=shalomnormal1> Installed Web-Font Kits </span> (:htmlend:)" :) -] !![-(:toggle id=FontLinks01 init=hide button=0 hide="(:html:) <span color=#660000> Hide Web-Fonts </span> (:htmlend:)" show="(:html:) <span color=#660000>Installed Web-Font Kits </span> (:htmlend:)" :) -] At least this one shows the color !![- (:html:) <span color=#660000 > (:toggle id=FontLinks01 init=hide button=0 hide="Hide Installed Web-Font Kits" show="Installed Web-Font Kits" :) </span> (:htmlend:) -] ALAS, TO NO AVAIL.
THEN, SOMETHING CLICKED, AND IT WORKED!
!![-(:toggle id=FontLinks01 init=hide button=0 hide="(:html:) <span class=shalomnormal1 color=#660000 > Hide Web-Fonts </span> (:htmlend:)" show="(:html:) <span class=shalomnormal1 color=#660000 > Installed Web-Font Kits </span> (:htmlend:)" :) -]
The secret? Use a span with class AND color (no quotes) with Cookbook:EnableHTML.
SteP 2015-12-23 bug fix version attached
SteP 2015-12-18 renders wrong label
(:toggle hide s1 label="Kunst und Kultur" group=info-main-5:) | \ (:toggle hide s2 label="Wein und Essen" group=info-main-5:) >>id="s1" class="info-main-5 toggler"<< !!!! Kunst und Kultur >>id="s2" class="info-main-5 toggler"<< !!!! Wein und Essen >><<
correctly renders as
Kunst und Kultur | Wein und Essenon page load, but incorrectly renders as
Wein und Essen | Wein und Essen
after clicking the "Wein und Essen" link.
SteP 2015-12-18 js error on other div's group= partial match
If group=info is used and the page includes an unrelated div.other-info the js script will attempt to toggle div.other-info and trigger a js error in so doing. The intended div.info is left untriggered. Work-around: use a unique class name for the group= parameter.
Is it possible to make toggle display the show and hide text inline?
e.g. some text
simon October 22, 2015, at 02:33 AM
Great recipe! One little thing I don't understand: Is there a reason why in Notes you suggest to hide the initial div by defining "hide" as a general class? Doesn't this work more simply?:
(:toggle abc init=hide:) >>id=abc comment<< hidden content... >><<
You can use the comment wikistyle with equal effect, as it makes the div invisible. So you are right, there is no need to define the css class 'hide'! - HansB February 02, 2014, at 06:21 PM
Are any of you incredible scriptors (of course Hans B. is tops as the writer of the script) up to including a way to link a password script to the toggle recipe in the cookbook and/or config pages. Any password script, such as Zubrag's or PhpBuddy, would do. Just think what a boon it would be to be able to hide stuff in plain site. I've tried, but am missing somewhere.
The script can be split into at least two, toggle1 and toggle2. I've succeeded at that, but not at more. Just search for "toggle," change it to toggle 1, and then change the script name. Of course, the id in the usage script must match, as well. Thank you! Humbly yours, Jagtig
A wonder recipe! And, did you know that font-family markup is compatible. For example:
I wonder if there is a way to toggle between more than 2 ids? Not nesting, just rotating through more than 2. Thanks for the fun recipe!
I know I could do this under the old SHOWHIDE system. I am trying to nest toggles within toggles. In this example one toggle reveals two other toggles which in-turn have info inside. Alas... it doesn't work. For me the last toggle is always outside what should be the master toggle. Is nesting possible? Am I doing it wrong?. Here's my example code:
(:toggle id=aaa init=hide show="Toggle everything!" hide="Toggle everything!":) >>id=aaa<< (:toggle id=aabb init=hide show="Toggle AABB" hide="Toggle AABB":) >>id=aabb<< some AABB text here! >><< (:toggle id=bbbb init=hide show="Toggle BBBB" hide="Toggle BBBB":) >>id=bbbb<< some BBBB text here! >><< >><<
I'm having problems getting the code produced by Toggle to validate as XHTML 1.0 Strict. The problem seems to be with the following statement in the PHP file (line 169):
Something doesn't seem to be correct about the nesting of the apostrophes and quotes and/or the document.write call isn't properly stripping out the backslashes around the href attribute.
$out .= '<a class=\'togglelink\' title=\''.$tooltip.'\' href="'.$act.'">'.$label.'</a>';
Thanks for your help and for the useful recipe! - svoida November 7, 2011 @ 1:42pm PST
I wish the old
Try this: add to config.php:
Markup('showhide', 'directives', '/\\(:showhide\\s*(.*?):\\)/ei', "ToggleMarkup(\$pagename, PSS('$1'))");
This should be sufficient. The old parameters lshow and lhide and the div and div2 will still be recognised by the toggle script, even though the preferred new ones are instead show and hide and id and id2. - HansB September 07, 2011, at 12:25 PM
I've now added a switch option: nojs=1 or nojs=2 for this. I think nojs=2 will achieve what you are asking. Please test and let me know if this option is sufficient! It is not a full revert to the old code, as that added inline styles, and I wanted to move away from these. - HansB April 03, 2011, at 02:53 AM
I tested nojs=2 on a couple of pages. This version works much better than the last when no cookie is involved - no more jarring visuals while loading. But I've encountered a problem involving my sidebar and cookies. When I use set=1 to make a cookie control the initial state, the toggle initially works correctly as long as the toggle is on the page. But when the toggle is in the sidebar, it shows the sidebar's div even when my last page view left it hidden. The sidebar's toggles are presented with the correct show or hide text - it's just that their divs are shown regardless. However, when I'm viewing the sidebar page itself, the toggles work correctly both in the sidebar and on the page. - RandyB April 03, 2011, at 10:51 AM
Thanks for checking this out! I remember the problem, and that's why I introduced inline <style> tags for hiding divs, but these are apparently breaking validation. So to give an option for more fluid page loading with hidden divs nojs=2 puts the style in the header. Except that toggle markup in a sidebar or other sub-page cannot do that (and I forgot). Can not using nojs=2 for sidebar toggles be a solution for you, say by setting in the toggle nojs=1 or nojs=0 if nojs=2 is your default? Another way would be to back-introduce the inline style tags, say with a switch nojs=3. But you see it is starting to get rather complex! HansB
I'm not sure what you mean by "setting in the toggle nojs=1 or nojs=0 if nojs=2 is your default" I tried changing the sidebar's toggles to nojs=0 and nojs=1, but neither helped. As I understand what you said, there is no way to prevent the temporary display of the hidden div when it's in the sidebar. If there is no solution, I'll probably have to remove all toggles from my sidebar and other sub-pages. That would be a shame, because they provide a great deal of functionality. For example, in my sidebar is a menu that the user customizes on the fly, showing the parts that are currently of interest, with those parts persisting from one page to the next until the user's interests change. But if the choice is between getting pages to validate and jarring the users, I'd rather have pages that do less but do it correctly and render cleanly. - RandyB April 03, 2011, at 02:34 PM
I've discovered another functional problem when the toggle control is not on the main page - it's a bigger problem than just a temporary flashing of a hidden div. When I load a page with the toggle's status set by cookie to hide, clicking the toggle doesn't appear to have any effect. However, clicking it actually did have an effect (presumably because it succeeded in setting the cookie), because when I reload the page, the change now appears. When the toggle starts with the div shown, however, it works as expected. Basically it appears toggle doesn't work correctly on a subpage. - RandyB April 03, 2011, at 10:54 PM
Please check out latest release which addresses this subpage bug. - HansB April 04, 2011, at 07:06 AM
In the sidebar, the toggle shows the div when first loaded even when the toggle is in its "hide" state. When I click on it to show and then click again to hide, it finally hides the div. - RandyB April 04, 2011, at 10:50 AM
I uploaded the file again. Version 2011-04-04. Please try once more. HansB
This version appears to fix the big functional problem that I cited, in my quick test. While it still briefly does that jarring display of the hidden div in the sidebar (I'm using nojs=2 and set=1), it does end up with the toggle and the div both in the proper state. - RandyB April 04, 2011, at 08:20 PM
Oh good. Here is an idea how to get rid of the brief show of sidebar or other subpage-toggled div when it is initially supposed to be hidden: put a class of 'hide' to your initially hidden div, in addition to your normal toggle setting. Define 'hide' in local.css for instance as
(:toggle abc init=hide:) >>id=abc hide<< text >><<
HansB April 05, 2011, at 02:34 AM
This didn't have any effect in my wiki. Maybe it's because it's not fresh-out-of-the-box pmwiki. Is local.css automatically included, or does the skin have to do something to include it? Also, is the local.css file supposed to be in pub/ or in pub/css/ ? - RandyB April 05, 2011, at 01:18 PM
Create a file local.css in folder pub/css/ if there is none. PmWiki icludes it automatically for all pages. You can check the HTML source of your page, its in the <head> section. Of course you could include the .hide definition in your skin's css file. Note the dot before hide, it is essential! And make sure you force a refresh from the server, with Windows you press Ctrl plus F5, or hold down the Shift key and click the Refresh button.
you can even put display=none directly as style into your div markup, without a .hide style class:
(:toggle abc init=hide:) >>id=abc display=none<< text >><<
HansB April 05, 2011, at 02:58 PM
Thanks for the suggestion. I tried the
Latest version 2011-04-06 may solve this. You can explicitly hide both first and second div, using one of the methods I explained above. The js will show div according to toggle state (cookie induced or not). HansB
That ALMOST works! When I define the div using
A syntax error perhaps? You need to set id=divname (same in both markups). display=none does not work with
HansB April 07, 2011, at 01:12 AM
Yes, that was the problem. Thanks so much, Hans! - RandyB April 07, 2011, at 03:56 AM
Is it possible to make all the toggled items visible (or hidden) with one click?
Is it possible to run in the toggle text with the previous line (which might be a section head)?
Thanks/ WRF 21 March 2011
The latest toggle recipe produces invalid html code since it adds inline
SteP 26 November 2010:
There is an undocumented argument to set tooltips for image toggles, use
What a wonderful thing! Toggle makes all my wikis much more usable.
but do not start an id with a number
\ \ * '''3D Tools''' \ (:toggle hide tdt:) (:div1010040109 id=tdt:)
3D Tools [Show]
Ward Christensen October 17, 2010, at 08:45 AM
thank you Markus August 23, 2010, at 13:39
Is it possible to specify hidden divs are not to be printed on an individual div or page basis?
thanks simon August 16, 2010, at 09:42 PM
I would find it useful to allow id2 to be a list. And perhaps id1 as well.
as always thanks for an excellent recipe, simon July 18, 2010, at 02:14 AM
I have a number of entities in a page that I want to toggle at the same time. All have the same class. As both class and id can be used as a selector (see  or  for example) is it possible to add a class parameter to toggle
thanks simon May 19, 2010, at 06:13 AM
Just want to say how much I appreciate the backwards compatibility of the recipe on a large wiki. simon November 24, 2009, at 04:31 PM
Is it possible to toggle by a checkbox and not with just a normal button?
So, if we try adding the following to the end oftoggle.php (prior to
HOWEVER -- this may not always be what the user wants... say, if an "answer" is hidden by default... how to handle these sort of cases? Have a config variable like
OtherMichael September 13, 2009, at 12:21 PM
I have gif files stored under the pub/bullet directory. How can I set the path in the show parameter ? SH
Toggle can only handle images attached to a page, like show=Site/show.png, but not files in some pub directory. The path gets evaluated by using variable
I am having a problem. When I mix buttons and images, only links show even when I have button=1. For example, I use these arguments: show="Table of Contents" hide=hidebtn.gif button=1 but "Table of Contents" becomes a link, instead of a button.
That is correct. If one of show= or hide= labels is set as an image, the toggle becomes a link, and button=1 will be ignored. Toggle will not set images to buttons (which are form elements and require more complicated HTML syntax for image buttons), nor does it allow to have a form button for "Show" and a link (or image link) for "Hide", you can't mix button and link/image. - HansB
I'm having an odd issue when using toggle in sidebars.
Fixed now in latest release. Thanks for pointing this out! - HansB July 23, 2009, at 03:40 AM
thanks for the brilliantly quick fix. Would you expect in my test case for there to be an issue where toggle directive is in both the sidebar and the main page? simon July 24, 2009, at 04:35 AM
there should be no issues having several toggle directives, just make sure the div acted on in the sidebar has a different id than a div acted on in the main page content. (i can't connect to your server [Page Load Error], so I can't check your test page) - HansB
Is it possible to use it for headings and toggle show/hide entire sections without having to explicitly add the IDs and toggle markup on each page and on each heading? Utopiah
Is $EnablePrintHiddenDivs supported by Toggle?
Also, why not use class, rather than id, to identify objects, this would mean one could have several parts of a page toggled by the same button
simon June 21, 2009, at 04:28 PM
And thanks for this recipe and your work on it, I find it invaluable.
ah, I didb't appreciate the implementation details, assumed that a class and an id could be treated similarly, simon July 21, 2009, at 11:00 PM
Great idea to combine togglelink and showhide. Note that apostrophe still doesn't work on my Mac. (Same problem as I described for togglelink.) -- RandyB
Thanks again for the great work!