Workshop - Clickable header to expand and collapse a section, not just icon

Today you have to click the icon in the faaar right to collapse/expand a section.
It takes users some time to figure this out.

So it would be nice if the entire header was clickable or at least the title.

image

Just an idea: I tend to use large buttons with „text only“ style instead of the section header to display the section title. The button can be tied to on click events of „toggle section xyz“. This will not give you the click-event across the entire section header but at least where the users are focusing on at that moment (the header title text).

That is better from a UX-perspective, thanks.
I had to compromise with the bold text on the title though :expressionless_face:

I am doing a looped layout for a FAQ:

Nice @bobbyb looks neat and clean :slight_smile: I also like your usage of the chevrons as expandable icon.
If you are looking for bold text, you could try the same but with a metric card in tag design with white background instead of a button. In tag design the label will appear thin grey, but the string value itself will be bold.

That did the trick @Phil-M! I also got rid of the on-hover-background-color now.
Thanks :slight_smile:

1 Like