Tag Info

Hot answers tagged


I'd say the convention is for the arrow to point right when collapsed and down when expanded. See this example, were the third one is opened:


Usually justifications for having hidden content come from a misplaced desire to reduce scrolling or to (rightly) let the user see all of the questions without getting distracted by the answer text. There is a better way to do this: a list of questions at the top with anchor links within the page to the question and answer. download bmml source ...


I’m not sure there’s a definitive answer yet. Here’s how I see the options. Arrow Conventions Trees have used right-pointing arrows for closed and down-pointing arrows for opened, which, as FreshCode mentions in his answer, has been generalized to expanders. It’s a reasonably well established convention, going back to Vista for Windows and the mid-1990s ...


I highly recommend doing some A/B testing on simple things like these. That being said, they wont make a significant difference between users unless there is some ambiguity in the interface. Typically I'd use the double-chevron when the distance of collapse is larger (>50% of interface size), and the single when the distance is smaller (<25%). You ...


As it is, your FAQ page fits easily on the smallest of screens, and your questions are already very well separated from the answers visually. Certainly, don't make me have to click to see the answer, just display them. If you ever have say, ten or more questions on each page, then maybe list them all at the top and anchor them like Charles suggested.


I think you should use option A, since in this case, the radio button has a higher hierarchy than the triangle. Leave some space between the radio button and the triangle so that the triangle and the title are grouped as a whole element.


First of all I would propose looking at the sequence of your users. Does he need to read all three (or more) of the panels to make a decision? If so, wouldn't it be more practical for it to be expanded all the time? I can imagine having to expand every item and reading through it carefully can be a pain. If it isn't then I would say look at the flow of the ...


What I most commonly see is a down arrow or no arrow. (Glamour is an exception with a right arrow, but I must admit I expected it to navigate to a separate page of comments and not operate as an accordion.) Facebook NYTimes Washington Post Glamour Stackexchange


I am quite into using arrows when exploring a tree/file structure. But I feel the contents of an accordion is much like a dialogue, specifically I am not expecting a tree. Accordions to me have their expand/collapse switches on the right (which is where I think you are placing your left/down symbol) and trees have theirs on the left. They use +/- or arrow ...

Only top voted, non community-wiki answers of a minimum length are eligible