[pmwiki-devel] toggling content

[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


On Sun, 7 Jun 2020 at 08:13, Petko Yotov <5ko at 5ko.fr> wrote:

> 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
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.pmichaud.com/pipermail/pmwiki-devel/attachments/20200607/a0d4f9c3/attachment.html>