ToggleNext

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.

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"; }
}

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.

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%%

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.