Closes #4343 Adds accordion expand/collapse all option

[joshuasosa]

Description

Adds an option in accordion paragraphs to add an "Expand all/Collapse all" button above the related accordion paragraph. The button will expand or collapse all accordion elements in the accordion set when clicked, respective of the button text.

Note: Assisted by Copilot for formatter and javascript functions.

Related issues

Closes #4343

How to test

1. Edit the Accordions demo page.
2. Edit the first accordion paragraph and checkmark the new 'Expand/Collapse' option.
3. Save.
4. Click the new 'Expand all' button above the accordion set to see all accordion elements in the set expand. The button text should change to 'Collapse all'.
5. Click the 'Collapse all' button to see all accordion elements in the set collapse. The button text should return to 'Expand all'.

Demo: https://pr5364-vehwk09c2tmxyxtbgdbjhbkm7jzb3pzh.tugboatqa.com/pages/accordions

Types of changes

Arizona Quickstart (install profile, custom modules, custom theme)

• Patch release changes
  • Bug fix
  • Accessibility, performance, or security improvement
  • Critical institutional link or brand change
  • Adding experimental module
  • Update experimental module
• Minor release changes
  • New feature
  • Breaking or visual change to existing behavior
  • Upgrade experimental module to stable
  • Enable existing module by default or database update
  • Non-critical brand change
  • New internal API or API improvement with backwards compatibility
  • Risky or disruptive cleanup to comply with coding standards
  • High-risk or disruptive change (requires upgrade path, risks regression, etc.)
• Other or unknown
  • Other or unknown

Drupal core

• Patch release changes
  • Security update
  • Patch level release (non-security bug-fix release)
  • Patch removal that's no longer necessary
• Minor release changes
  • Major or minor level update
• Other or unknown
  • Other or unknown

Drupal contrib projects

• Patch release changes
  • Security update
  • Patch or minor level update
  • Add new module
  • Patch removal that's no longer necessary
• Minor release changes
  • Major level update
• Other or unknown
  • Other or unknown

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.
• My change requires release notes.

[joshuasosa]

Note: // eslint-disable-line max-nested-callbacks added to resolve eslint warning:

warning Too many nested callbacks (4). Maximum allowed is 3 max-nested-callbacks

[bberndt-uaz]

Here are a couple suggestions for updating the JavaScript.

[joshuasosa]

Here are a couple suggestions for updating the JavaScript.

Thanks for reviewing and the suggestions! They look good and mostly work. Bootstrap accordions normally have parent selectors where expanding one accordion will collapse the others under the parent. The suggestion to use a click event on buttons would work only for this specific paragraph use case where it's using an "always open" approach with no parent. I added your suggestions and changed it back to manipulating class selectors directly on accordion elements to be applicable for both parent and parentless accordions.

[danahertzberg]

All the functionality is working as expected. I'm a bit worried about the display, however. There will be content above the accordion block in almost all cases. So I'm wondering if there is a way to add an alignment option? Or can it float next to the content? Or maybe just be a text link 🤔

See my example page

Text link mockup

[joshuasosa]

Thanks for all the updates! Looks like if there is one item in the accordion (uncommon), using the button to expand/collapse produces a slightly off display with a rounded corner on the accordion header background. Is this something worth fixing?

Thanks for pointing that out! I updated it to update the btn classes, which was missed.

Think we should consider an alignment option in this PR?

Sure, what sort of alignment options should be added? 'Left' and 'Right' options? (Or should it be 'Start' and 'End'?)
If you think a 'Float' option should be added per your previous comment suggestion, how might that look on desktop and mobile?

[danahertzberg]

Thanks @joshuasosa!

Sure, what sort of alignment options should be added? 'Left' and 'Right' options? (Or should it be 'Start' and 'End'?)
If you think a 'Float' option should be added per your previous comment suggestion, how might that look on desktop and mobile?

I'm thinking maybe just a top/bottom alignment option? I'll help find more examples of accordions in the wild, too.

[danahertzberg]

Pages with accordions on them:

• https://grad.arizona.edu/stackable-certificates/faq
• https://anthropology.arizona.edu/undergraduate-scholarships-awards
• https://cancerbiology.arizona.edu/trainees/student-resources
• https://cybersecurity.arizona.edu/faqs
• https://infosci.arizona.edu/ma-library-information-science/curriculum-specialties-courses
• https://law.arizona.edu/careers/student-resources
• https://sociology.arizona.edu/double-major-options

Many have just a heading above the accordion. Some have content between the accordion and heading.

[danahertzberg]

Testing on existing sites with existing accordions would be beneficial

[camikazegreen]

I’ve applied this PR to pull-5364-azs-cybersecurity.pantheonsite.io and am not seeing the option to add the Expand/Collapse button to existing paragraphs.

[joshuasosa]

I’ve applied this PR to pull-5364-azs-cybersecurity.pantheonsite.io and am not seeing the option to add the Expand/Collapse button to existing paragraphs.

Thanks for testing! I think I'll need to add a database update for accordion paragraphs to use the new 'Quickstart Accordion Paragraph Behavior'.

[joshuasosa]

I’ve applied this PR to pull-5364-azs-cybersecurity.pantheonsite.io and am not seeing the option to add the Expand/Collapse button to existing paragraphs.

Thanks for testing! I think I'll need to add a database update for accordion paragraphs to use the new 'Quickstart Accordion Paragraph Behavior'.

@camikazegreen Please try doing a drush config-distro-update to pull in the updated paragraph behavior.

[djcelaya]

This is a nice addition and I think the more compact toggle works well right-aligned where the visual accordion "controls" are already positioned.

In my local testing, I did notice that there is a chance for a single element accordion to become out of sync with its expand/collapse state. I checked Show "Expand/Collapse All" button for both accordions included in the demo content and was looking at the second one which has just one element. If it is expanded on page load, clicking the up chevron does not update the Collapse all text to Expand all.

Likewise, if it is collapsed by default and I click the down chevron, Expand all is not updated to Collapse all (since all 1 elements are now expanded).

[joshuasosa]

In my local testing, I did notice that there is a chance for a single element accordion to become out of sync with its expand/collapse state. I checked Show "Expand/Collapse All" button for both accordions included in the demo content and was looking at the second one which has just one element. If it is expanded on page load, clicking the up chevron does not update the Collapse all text to Expand all.

What browser is used for the test? I'm currently unable to replicate in Windows Chrome, Firefox and Edge.

[djcelaya]

Originally I was testing on Safari. I just pulled up Firefox on my Mac and am seeing the same behavior.

Screen.Recording.2026-03-23.at.2.34.02.PM.mov

[joshuasosa]

Originally I was testing on Safari. I just pulled up Firefox on my Mac and am seeing the same behavior.

I have reduced motion on my machine which made me miss this case. Re-enabling motion let me reproduce the issue. I updated it with a different approach. Please test again.

[djcelaya]

Originally I was testing on Safari. I just pulled up Firefox on my Mac and am seeing the same behavior.

I have reduced motion on my machine which made me miss this case. Re-enabling motion let me reproduce the issue. I updated it with a different approach. Please test again.

The issue is corrected with your recent changes. Thanks for looking into that!

[az-digital-bot]

Tugboat has finished building the preview for this pull request!

Link:

• https://pr5364-vehwk09c2tmxyxtbgdbjhbkm7jzb3pzh.tugboatqa.com

Dashboard:

• https://dashboard.tugboatqa.com/69a1ce2b9af1ba00169396dd

[joshuasosa]

Per 3/27/26 AZ Digital Meeting: There was a note about the previous paragraph behavior settings potentially being lost after updating with this PR. I confirmed that the bottom spacing would be lost and added a database update (assisted by copilot) to migrate the accordion bottom spacing. The bottom spacing setting for accordions is the only paragraph behavior setting that was available prior to this PR and should now be addressed by the database update.

To test the database update, I performed these steps:

1. Installed standard Quickstart with demo content.
2. Created a new test page with an accordion and set a non-zero bottom spacing in the accordion's settings.
3. Changed branch to this PR: git checkout issue/4343
4. Ran distribution updates to bring in the new paragraph behavior: drush config-distro-update
5. Cleared cache: drush cr
6. Ran database updates to migrate existing accordions to the new paragraph behavior: drush updb
7. Edited the test page and confirmed the accordion bottom spacing is retained post-update.

[djcelaya]

I tested the config and DB updates locally against the demo content and they worked great!

[kevdevlu]

i tested the config and DB updates locally and they worked great!

Also tested by pushing the code to anthropology and did config distro and updb and seems to work well too: https://issue4343-azs-anthropology.pantheonsite.io/undergraduate-scholarships-awards

[kevdevlu]

Could just be personal preference, but when testing the expand/collapse all functionality on larger accordions (like in https://issue4343-azs-anthropology.pantheonsite.io/undergraduate-scholarships-awards), triggering all panels at once feels abrupt. I wonder if we added the same transition as what we have currently when opening just one panel, it would make the motion feel smoother and less jarring

[danahertzberg]

I agree with Kevin's comment. Please also move the checkbox above the Additional options accordion in the editing UI.