[pmwiki-devel] toggling content

[Simon]

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

Any suggestions

tia

Simon

[Petko Yotov]

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

_______________________________________________
pmwiki-devel mailing list
pmwiki...@pmichaud.com
http://www.pmichaud.com/mailman/listinfo/pmwiki-devel

[Simon]

This is brilliant thanks.

I'll go for the plain (:details:) markup, but I can see a use for ToggleNext in the future.

thanks again