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.