ToggleNext
As of February 2020 there is a discussion on the mailing list and this feature may be removed in future PmWiki versions (in that case it should be made available as a recipe). See the block markup (:details:) for a JavaScript-free implementation for recent browsers.
Unobtrusive WikiStyle-based toggle-next element. A function similar to UnToggle although implemented differently was included in the PmWiki core in version 2.2.124.
The feature is enabled below, click on the individual headings to open each section, or click here to open/close all sections.
Description
This function allows to have hidden sections in a page that open when a visitor clicks on an element.
The elements need to be subsequent, the clicker/title immediately preceding the hidden section.
Once the feature enabled, the clickable elements are simply marked with WikiStyles. No new markup needs to be learned.
People with older browsers or JavaScript disabled will see the sections fully open.
The printable view (both in-browser and the ?action=print) also keeps all sections open.
Demo (FAQ in a French language website): https://virtour.fr/faq/ or you can now use it in the Test/ group and in the WikiSandbox on pmwiki.org.
Installation & configuration
Add to config.php the following line:
$ToggleNextSelector = 'div.pmtoggle, p.pmtoggle, dl.pmtoggle dt';
The value is a list of JavaScript or CSS query selectors and can use any selector you like. In the above example (now enabled on pmwiki.org), division blocks with the classname "pmtoggle" and definition terms inside a definition list with the classname "pmtoggle" will become clickable and will toggle the next element.
If you want migrate from the UnToggle recipe, you would use:
$ToggleNextSelector = 'div.toggle, dt.toggle, h6';
If your skin doesn't contain the styles for the clickable elements, you can add them to your pub/css/local.css file:
*[data-pmtoggle], .pmtoggleall {
cursor: pointer;
font-weight: bold;
}
*[data-pmtoggle]::before {
content: "\025BE\00A0";
float: left;
}
*[data-pmtoggle="closed"]::before {
content: "\025B8\00A0";
}
*[data-pmtoggle] + * {
margin-left: .8em;
}
*[data-pmtoggle="closed"] + * {
display: none;
}
@media print {
*[data-pmtoggle="closed"] + * { display: inherit; }
*[data-pmtoggle="closed"]::before { content: "\025BE\00A0"; }
}
Usage in a wiki page
In a wiki page, use the selectors defined above, for example:
>>pmtoggle<< This line will toggle the next element >>next<< This is the hidden section. It doesn't need to have the wikistyle "next". It can have multiple paragraphs. >>pmtoggle<< Another clickable line >>q<< Another hidden section. >>pmtoggle<< This one hides a table -- the next element is a table not a div. >><< || class=simpletable width=200 ||! h ||! h ||! h || || a || b || c || || a || b || c || || a || b || c || : %list pmtoggle% A definition list : The definition data is hidden. : Another term : Another data. : This can go on : Another hidden information. | This line will toggle the next element This is the hidden section. It doesn't need to have the wikistyle "next". It can have multiple paragraphs. Another clickable line Another hidden section. This one hides a table -- the next element is a table not a div.
|
There is one classname, currently hardcoded, that can be used to open and close all hidden sections: "pmtoggleall" which you can use in the page as many times as you need:
%pmtoggleall% Click to open/close all sections%% | Click to open/close all sections |
Any of these "pmtoggleall" elements will open or close all sections. On this page you have the one in the introduction and the one above this paragraph.
Notes
...
Change log / Release notes
Added to the core for 2.2.124. See PmWiki:ChangeLog for any changes.
See also
- PmWiki:BlockMarkup for the
(:details summary="...":)markup that does not require JavaScript to work but is not yet widely supported.
Contributors
Comments
See discussion at ToggleNext-Talk
User notes +1: 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.