ToggleNext-Talk

Summary: Talk page for ToggleNext.
Maintainer: Petko
Users: +1 (View / Edit)

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).