Clickable area of an Expand/Collapse button

Question

I have an Expand/Collapse button with text beside it and the button occupies an entire row/block on the page: [+] Text Here

What should the clickable area of this button be? Should it be just the icon [+], the icon and the text or the entire row?

Answer 1

[+] icon is there to indicate that this row is expandable. So, in effect, you can make the whole row clickable.

To progressively indicate that a row is expandable you can at hover state

• Underline the row

[+] My Documents //normal

[+] My Documents //at hover state

• Show a number of child items like

[+] My Documents //normal

[+] My Documents - 3 Folders and 10 files //at hover state