Page MenuHomePhabricator

Collapsible element custom toggle should allow different text for collapsing and expanding
Open, Needs TriagePublic

Description

The jQuery.makeCollapsible system allows for elements to be made expandable/collapsible, by default adding a button labelled "Expand" or "Collapse", depending on current state, optionally overridden by data-collapsetext and data-expandtext. However, when one uses customtoggle to allow the button to be placed elsewhere, there is no way to have the button display "Expand" or "Collapse" depending on state.

Possible solutions:

  • Have custom toggles default to the standard "Expand"/"Collapse" text if certain conditions are met.
  • Have custom toggles check for the data-collapsetext / data-expandtext attributes, and overwrite the contents with them when they're present.
  • Set up some fancy thing that displays particular child elements of any custom toggle depending on state.

Currently, the only way to have it work is to write up some complicated TemplateStyles CSS, which is quite difficult for the average editor to do.

Event Timeline

I agree with your suggestion. I stress, however, that it should only apply to custom toggles with only ONE attached collapsible element as, otherwise, "Expand"/"Collapse" might very well not describe the toggling outcome. Furthermore, toggleClasses and toggleARIA should also be applied on such cases. To enforce that only 1 to 1 custom toggles get the extra options and to update "neighboring"/twin toggles, I think the scheme in lines 403+ from T269400: Implement "smart" On-Off and Partial Custom Toggles in jquery.makeCollapsible.js, to attach appropriate events after all collapsibles have been linked, could be used. I think this idea would be a nice extension to that task.