Using HTML5 <summary><details> Accordions

**Acorn** · 26 February 2022, 01:39 PM

HTM5 has two Tags called <summary> and <details.

Wrapping the <details> Tag around other HTML elements effectively hides them all and you only see is a right-pointing triangle and the word "Details".
Clicking either expands the hidden material and another click toggles it closed.

No JavaScript code or other scripting.

If you add a <summary> tag around a Header, instead of "Details", you now see the wrapped Header text.

In the case of a Xara design, this is quite limiting as the only way to apply these Tags is through a Placeholder.
At least it is only HTML5 code.
You can try this with the information in https://www.w3schools.com/tags/tag_summary.asp being put into a Placeholder > HTML code (body).
Very basic with no formatting and none of the usual Xara benefits around size and colour.

My approach allows this limitation be be breached.
You create two Paragraph Styles, apply to a Text Area and add a Name.

I used some simple jQuery to converts these styles to the HTML5 Tags.
You do need jQuery invoked: give something the special Name of UsesJQuery.

I also added in some CSS to add a bit of vim to the presentation.

Have a try with CSS - Summary Details Expand text.xar

Acorn

**Egg Bramhill** · 26 February 2022, 04:15 PM

Very interesting Acorn, I'll have a play around with this and see what I can do.

**Egg Bramhill** · 26 February 2022, 04:24 PM

Looking at the W3 example I particularly like the Summary can be clicked on and it repositions the summaries below.

Bit hard to explain, best if you replace the text in the W3 'Try It' example with the html below:

<!DOCTYPE html>
<html>
<body>

<h1>The summary element</h1>

<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

<details>
<summary>Egg Center</summary>
<p>Egg is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

<details>
<summary>Cot Center</summary>
<p>Cot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

<details>
<summary>Centre Center</summary>
<p>Centre is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

</body>
</html>

Would this work in Xara and allow your text variants?

**Acorn** · 26 February 2022, 05:32 PM

Egg, what you are describing is a set of accordion clicks that open and close and push each other down and pull back up.

If you include it as is in a Placeholder, you will get the same action in Xara.

Because it is HTML5 code and my jQuery code is looking for every instance of a ClassName (toggle), the location of the HTML5 across Variants is immaterial.

The expanding accordion, hover, will nly work for direct HTML4 inside a Placeholder.
Xara's Text areas are locked in place and so do not act in the same fashion.

I have used the exact same approach to develop a NavBar:

Code:

<details>
  <summary>Site Pages - A-Z</summary>
  <ul>
    <li><a href="aaaa.htm">AAAA</a></li>
    <li><a href="bbbb.htm">BBBB</a></li>
    <li><a href="cccc.htm">CCCC</a></li>
    <li><a href="zzzz.htm">ZZZZ</a></li>
  </ul>
</details>
<details>
  <summary>Hot Topics</summary>
  <ul>
    <li><a href="hot.htm">Topically Hot</a></li>
    <li><a href="topic.htm">Hotly Topical</a></li>
  </ul>
  <details>
    <summary>Hot Topics (Expanded)</summary>
    <ul>
      <li><a href="hotx.htm">Expanded Topically Hot</a></li>
      <li><a href="topicx.htm">Expanded Hotly Topical</a></li>
    </ul>
  </details>
</details>
<details>
  <summary>Q: How do I get to Hell</summary>
  <p>A: <a href="javascript: ;">Use Google Maps</a></p>
</details>
<details>
  <summary>Technology: CSS Coding used here</summary>
  <ul>
    <li><a href='popup: close "MenuStyling" open "LinkHiLite"'>Link Highlighting</a></li>
    <li><a href='popup: close "LinkHiLite" open "MenuStyling"'>This Menu's Styling</a></li>
  </ul>
</details>

i have yet to get popups working.
I placed this on a Slide In from Left Layer so only the word Menu is visible on the page until clicked.

Acorn

**Egg Bramhill** · 26 February 2022, 07:09 PM

Thanks Acorn, I like that a lot. Please get the popups working.

**Acorn** · 26 February 2022, 08:14 PM

Egg, all working.
I don't like the approach; it is too messy.
I understand it and can explain it but I doubt many will follow or want to.

CSS - Summary Details Accordion.xar

Xara's decode of popup does not extend to palin HTML.
You have to revert to creating blobs with the popup code and previewing to capture and tweak the generated links.
The you hide the blobs on the MouseOff page.
You add the HTML into the Text tool-selected "Accordion Placeholder" to keep the formatting.

Acorn

**Acorn** · 28 February 2022, 02:50 PM

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:

Choose a single Text object or Shape.
- If more than one, they have to be grouped as a single object (bad).
Give it a Name of htmlclass="reveal".
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

**Acorn** · 28 February 2022, 07:06 PM

The approach to closing a single open <details> required a bit more code.

Each shape or object is first given a ClassName of htmlclass="close".

Website > HTML Code (body) addition is:
<script>
$('.close').click(function() {
$(this).parent().removeAttr('open');
});
</script>

A small CSS addition:
summary, .close:hover { cursor: pointer }

Job done.

Acorn

**Egg Bramhill** · 28 February 2022, 07:50 PM

Good God. All done without a layer in site!
Still trying to get my head around this. I'll try and see what's going on but I'm finding it hard.
Thanks a lot

**Acorn** · 28 February 2022, 09:46 PM

Originally Posted by Egg Bramhill

All done without a layer in site!

Egg, site or sight - either works.

You can still use layers, MouseOver and pop-ups.

If you were coding in HTML directly, all the <summary> & <details> stuff is a given.
Xara adds a richness that would make the <details> part very difficult to code otherwise.
The downside is you have to name the <summary> and the close object and group them with the <details>'s ones; no much harder than placing things into layers.

Acorn