ToggleNext-Talk
This space is for User-contributed commentary and notes. Please include your name and a date along with your comment.
Add possibility to make toggle opened by default on a page load?
Thanks for the cook! What would be really useful is to add some option to control the state of block on page load, keeping it open by default. I tried this: (:div class=pmtoggle data-pmtoggle="open":), but this is not working...
This is useful feature for example for creating long aside menu: one can make current group's menu open only when we are inside this Group.
Also on your example I think it looks more understandable for visitors when 1st section of 1st accordeon is opened by default.
Finar February 24, 2020, at 05:07 PM
This may be dropped in future PmWiki versions, there is a discussion in the PmWiki:MailingLists. In that case it will be moved to a cookbook. At the moment I don't feel I should work on it now. You may want to use the (:details summary="title" open=open:) block markup which does not need JavaScript to work. Or, simply use a different classname for the one that doesn't need to be toggled. --Petko February 24, 2020, at 05:17 PM
>>pmtoggle<< This is closed. >>a<< this is the content >>open<< '''This is a heading of an open drawer''' >>a<< This is the open content. >>pmtoggle<< This is closed. >>a<< this is the content >>pmtoggle<< This is closed. >>a<< this is the content >><< | This is closed. this is the content This is a heading of an open drawer This is the open content. This is closed. this is the content This is closed. this is the content |
Use case with custom styles
Here is how I configured the feature for use at Virtual tours FAQ (in French).
My custom CSS for colors and highlights is as follows:
/* blue clickers */
*[data-pmtoggle], .pmtoggleall { color: blue;}
/* highlight clickers when the mouse cursor is over them
or when the clicker is a target of a focused link */
*[data-pmtoggle]:target, *[data-pmtoggle]:hover { background-color: #ff8;}
/* automatically hide "Open" or "Close" in a %pmtoggleall% */
.pmtoggleall .xclose { display: none; }
.pmtoggleall[data-pmtoggleall="open"] .xopen { display: none; }
.pmtoggleall[data-pmtoggleall="open"] .xclose { display: initial; }
I have near the top of the page, in French:
%p pmtoggleall% %xopen%Open %xclose%Close%% all sections.
So that when the sections are open, only "Close" is shown, and when they are closed only "Open" is shown. --Petko January 27, 2020, at 12:52 PM
Hover pointer glitch in cookbook page
Just noticed: when the mouse pointer hovers over the "open/close all links" the pointer doesn't change to a hand. --SteP January 27, 2020, at 11:49 AM
Yes, sorry, I forgot to commit this change, I'll cut 2.2.125 now. --Petko January 27, 2020, at 11:54 AM
Talk page for the ToggleNext recipe (users).