Feature request. Proposal for new addition of 'accordions' such as on gov.uk pages

[GC-92]

Example: https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style

There is use of expandable accordions on the above page used by GOV.UK. I would like to propose having this as a feature if other councils see a need for it. For our needs we sometimes use A-Z's and this would fit the need for our use.

Image:

Many thanks and kind regards,

[willguv]

Essex has one at https://intranet.essex.gov.uk/family-leave/maternity-leave/maternity-pay

[andybroomfield]

I think thats actully included as a paragraph type.

[willguv]

Thanks Andy. I didn't remember that this has been done - maybe it's being crowded out by the other options?

[Dixonj1]

@willguv we've used this paragraph type and it needs a bit of work to improve it. The issues are:

• no show/hide mechanism
• can only show one item at a time
• can't print the whole page with all items showing
• blocks need to be a bit more subtle (not sure if that is just our CSS)

@markconroy suggested I create an issue for this, so I've added it to this one. We'd be happy to contribute to this one as it would be really useful for us.

[ctorgalson]

@Dixonj1 @willguv @markconroy I took a look at the code and config for this. Mostly these tasks would be straightforward if they're not already in development. IMO, the hardest part would be making a comprehensible UI in the paragraph type. Of the four proposed enhancements:

1. no show/hide mechanism: this would require
   • a little new code in twig (for a button),
   • a little new code in the javascript file (the behaviour),
   • (probably, based on a11y feedback on similar features I've built before) a button without aria-expanded combined with a ('polite') Drupal.announce() message explaining what happened
   • a new paragraphs field to enable/disable rendering that button (e.g. "Display show/hide all button")
2. can only show one item at a time: this would require
   • a new empty data attribute (e.g. data-accordion-multiple)
   • a little new code to modify the "close" condition based on the existence of the data attribute
   • a new paragraphs field to enable/disable this (defaulting to false to preserve the current behavior)
3. print the whole page with all items showing: as far as I can determine, the default is to display all accordion items on print (see screenshot)
4. can't help with this one :)

So: are these still wanted, and not already in development? If so, I can take a shot at them next week.

My time on this provided by Annertech

[Dixonj1]

@ctorgalson @willguv @markconroy we'd certainly use this if it was available. There is some useful guidance in the GOV.UK design system.

[markconroy]

print the whole page with all items showing: as far as I can determine, the default is to display all accordion items on print (see screenshot)

That was fixed in https://github.com/localgovdrupal/localgov_base/pull/576

The things from this issue we'd need to consider now are

• no show/hide mechanism
• can only show one item at a time

---

Thanks to Big Blue Door for sponsoring my time to work on this.

[ctorgalson]

I have these changes essentially ready, but can anybody point me to the specific tooling we're meant to use to compile the es6 file to es5?

[ctorgalson]

Answering my own q, per yesterday's Technical Drop-in call, we can remove the .js file, and rename the .es6.js file to .js, and make all changes there.