I had a rethink and I can now toggle just about anything: jQuery reveals.xar
Thing of it as a pop-up layer replacement with a toggle on and off feature; something far harder to code for in Xara using Layers.

The code is almost trivial.

jQuery
<script>
$('.reveal').each(function() {
$(this).parent().wrap('<details>');
$(this).unwrap().wrap('<summary>');
$(this).removeClass('reveal');
});
</script>
CSS
<style>
summary { cursor: pointer }
::marker{ display:none; }
summary{ list-style: none }
</style>


The creation of an accordion is now:
  1. Choose a single Text object or Shape.
    • If more than one, they have to be grouped as a single object (bad).

  2. Give it a Name of htmlclass="reveal".
  3. Group this with any number of other objects.
    • They should be grouped as separate objects (good).

Each reveal object is transformed into a <summary> and embedded within a <details> Tag (everything else).
The <summary> is a Toggle to open and close is associated <details>.

I have embedded a couple of Close buttons.
Their code is javascript: $('details').removeAttr('open');
I have also included a Reveal All link: javascript: $('details').attr('open', true);

What I have not yet managed is a specific Close for a given <details>.

I have checked Links to MouseOver and other pop-up Layers and Animation Effects.
As ever, Egg, I forgot to text FF; the javascript Links require void to precede the code!
I have checked back as far as XWDPv15.0 and, remarkably, it works.

It can be used as a mega-menu.

Nesting seems reliable. Xara Cloud has yet to handle the editing of Presentation Steps or even Layers; this could be an alternative.

A little extra code is required to toggle off all others when one <summary> is clicked. This could become a Text accordion, H or V as well as a photo gallery.

The point of this is it is not using lots of JavaScript. It is just leveraging an HTML5 feature.

All the CSS is doing is making a hover on a <summary> show as a web hand (click me!).
The other two statements hide the toggle icons as they all hang out top-left of the page as I would otherwise have to add in style statements to marry them up.

A <summary> object is nested within the <details> and should be the bottom-most item in the P&L gallery for that Group (it seems to work regardless of position though).
Avoid placing <summary>s behind <details>, you might not get to see it to perform a toggle.

Acorn