I have a doubt! I am not sure that the direction of the arrow is correct. My opinion is that currently the direction of the arrow is not in the right direction (my reference is a dropdown, even if my item opens from down to up)

What do you think? Thanks!

Item closed: enter image description here

Item opened: enter image description here


2 Answers 2


The problem is the top arrow. The convention is for the arrow to point left (or right if it was in the front) when collapsed and down when expanded, like the image below: Demonstration


The header of the expansion panel should stay fixed in the same position, so the user can open and close it without moving the pointer (mouse or finger). The arrow indicates the direction the panel will expand or collapse. In the examples below the panel opens below the header (first case) and above the header (second case, this is a less common case but imagine the panel is fixed to the bottom of the screen).

Not the answer you're looking for? Browse other questions tagged or ask your own question.