Restore "clamper" functionality for e.g. subjects, without using jQuery

[agmckee]

Closes #11866

Fixes the "clamper" functionality that was inadvertently removed in #11682 by adding an event handler for click events on elements with the class "clamp".

Technical

Based on the approach taken by @lokesh in #11870 but without using jQuery. Uses plain JS properties and methods which are widely supported.

Testing

Build the JS and go to any work page and verify that collapsed category list is expandable.

Screenshot

Screencast.From.2026-02-14.19-24-29.mp4

Stakeholders

@cdrini

[lokesh]

@agmckee could you add another video showing the behavior working after the changes. Code looks good otherwise!

Behaviors to check:

1. Clicking the header ("Subjects") to toggle.
2. Only showing the arrow when items exceed one row

[agmckee]

As requested:

Screencast.From.2026-02-15.17-54-23.mp4

Checked:

Only showing the arrow when items exceed one row. ✓
Clicking the header ("Subjects") to toggle. ✓

Also:

Clicking the right-pointing triangle (▸) character to toggle ✓
Clicking the ellipsis character to toggle ✓
Links to subjects continue to work normally (clickable to visit subject page) ✓

[tfmorris]

It's hard to tell from the video, but it doesn't look like the triangle's state is correctly tracking the state of the list. Perhaps it's only updating when clicked directly on, but not when the word "Subjects" or the ellipses are clicked?

[agmckee]

It's hard to tell from the video, but it doesn't look like the triangle's state is correctly tracking the state of the list. Perhaps it's only updating when clicked directly on, but not when the word "Subjects" or the ellipses are clicked?

You're correct, it wasn't updating the UI properly. I've found and fixed the issue, and was able to further simplify the code while resolving that issue.
New recording:

Screencast.From.2026-02-16.12-35-17.mp4

[lokesh]

LGTM. Tested locally and everything works as expected. Thanks @agmckee

---

Not blocking, but for new features that are used across multiple files and depend on an html hook, we should avoid the hook being a simple css classname as this is brittle as markup shifts and devs assume the class is for styling exclusively. An alternative is using a data attribute, a couple of example approaches: data-behavior="clamp" or data-ol-enhance="clamp". Mostly though, I expect us to use web components for this scenarios, and this will be non issue.