[pmwiki-devel] toggling content
Petko Yotov
5ko at 5ko.fr
Sat Jun 6 13:13:50 PDT 2020
You may simply need the new details+summary block markup:
https://www.pmwiki.org/wiki/PmWiki/BlockMarkup
(:details summary="Show alert...":)
Alert 1 text
Alert 2 text
(:detailsend:)
It shows an arrow that changes direction when the element is toggled. It
doesn't require JavaScript to work. The elements can be styled with CSS.
This would be the easiest, and most future-proof way to do it.
If the arrow is not enough for you to show that the element can be open
and closed, you can add the Show and Hide words with CSS:
(:details class=showhide summary="alert":)
pub/local.css:
details.showhide summary::before { content: "Show "; }
details.showhide[open] summary::before { content: "Hide "; }
Note: the summary="..." attribute will be better left without any inline
markup (future-proof).
If you must have one link to open several blocks, I'd see the ToggleNext
core feature:
https://www.pmwiki.org/wiki/Cookbook/ToggleNext
It requires JavaScript to be enabled. On the talk page I explained how I
have a "toggle all" link that opens all sections:
https://www.pmwiki.org/wiki/Cookbook/ToggleNext-Talk
It is can be seen in action here: https://virtour.fr/faq/ .
The show/hide words are indeed shown and hidden by CSS when appropriate.
Untoggle can do the "toggle next" part but not the "toggle all" part.
Petko
On 06/06/2020 01:58, Simon wrote:
> I'm writing a recipe where I wish to toggle content,
> and rather than implement another toggle or upload another javascript
> I'd
> like to utilise something already built in, or available in PmWiki
>
> For example I've looked at
> https://www.pmwiki.org/wiki/Cookbook/UnToggle
>
> My requirements are along the lines of:
>
> <p class="alerthead"><span class="hideme">Hide</span><span
> class="showme">Show</span> alert</p>
>
> <p class="alertbody showme">Alert 1 text</p>
>
> <p class="alertbody showme">Alert 2 text</p>
>
> When I click on the alert head I'd like to toggle the display of the
> alerts
> on and off
More information about the pmwiki-devel
mailing list