When an accordion or collapsible panel is open, are there any concerns with having the header BELOW the panel?
According to this article, an accordion is composed of headers and panels as follows:
I will refer to a single one of these elements, with a header and panel, as a “collapsible panel”.
Below is part of an accordion example provided by W3, showing a collapsible panel developed with best practices:
But what about a collapsible panel design with the header at the bottom?
One issue I can think of is, if the content is quite long, like in the example here, the user might not be able to see the header easily. However, assuming the content is small (e.g., only 2 fields), are there any other UX concerns with this design?
The reasoning behind this design is that it feels more intuitive to me. I will try to illustrate with an animation:
Animation frame 1
Animation frame 2
Animation frame 3
Animation frame 4
I am considering this design for such content in general, not for a specific scenario.
While I understand your read on why the header would go under the panel; the opposite visualisation can follow the same animation "principle" and make the same amount, if not more, visual sense.
Think of an actual accordion being held sideways by someone. The "header at the bottom" logic would have the bottom half of it being pulled down to show the "folded" part; while the "header at the top" logic would be the same accordion being "unclasped", which would make the bottom half just fall down to show the folds (panel). So, from the get-go, I'd argue that the "header at the top" relationship is connected in a more natural and effortless way to its physical world counterpart.
Putting that aside, having the text that titles something at the bottom of that something goes pretty head-on against a left-to-right, top-to-bottom reading and hierarchy pattern. A title, or a "header", goes at the top of a content to give it a name and context (hence the name). In short, having a "head" at the feet is a big no-no in my opinion.
What might be throwing you off is the arrow element being used to expand the panel. Consider other options:
Arrow on the left pointing to the header title
Expands to an arrow pointing down. The selected header gets highlighted and the physical relationship between the header and the panel that shows up "under" it can be reinforced by indentation or a shadow
Another option is using the +/- signs
Regardless of the chosen element to indicate expansion, I'd strongly recommend not putting the header at the bottom. Besides what I just mentioned, if you have a lot of items in your panel, the header might go under the scroll line; so I would be looking at a list of items in a panel without knowing their title (context). You could use an internal scroll on the panel, but scrolling up and down a list that has its title on the bottom still feels very odd.
Well, those are my two cents, hope it helps.