How to toggle truncating of long radio button labels?

Question

In my application, I have a series of radio buttons. The associated labels can contain a number of fields and become quite long, so I'd like for the labels to be expaneded and collapsed.

I've considered adding a toggleable +/- button to the left to allow the user to expand the section and see the full label:

However, I'm worried that the +/- icons on the left will be too close to the radio buttons and cause errors or confusion, so how should I allow the user to toggle the label collapsibility?

Answer 1

Provide a subtle "Read More..." or "Show All" button immediately after the truncated text (pick your favorite/most appropriate wording).

^{download bmml source – Wireframes created with Balsamiq Mockups}

Also, align the links/buttons that toggle this feature so that expanding then collapsing doesn't require moving the mouse. This would allow the user to "peek" briefly at the full content without requiring much effort.

Placing the expand/collapse function on the right would provide adequate separation from your radio button, so your users would be less likely to accidentally make a selection when trying to toggle the collapse.

If it seems appropriate or useful for your use case, consider adding an "expand all/collapse all" function as well. If there are many of these and your user would like to read everything, this could really help them out.

Answer 2

You could try a "view more" link at the end of a lengthy label that has been truncated (and a corresponding "view less" or similar link at the end of the expanded label to collapse it). I've not seen this done for radio buttons, but it is a pretty common pattern for expanding regular text that has been truncated (e.g. on Linkedin).

If the label is short enough that it doesn't need truncating, the above link would not be displayed. Also, if the label is truncated, you should probably use an ellipsis (...) at the end of the truncated text to indicate that fact.