I need to have collapse and expand section (vertical) within mobile view. Once users click to expand section - shall other sections become collapsed or opened?

  • Pro for close - mobile - not much view and in case user open over again sections he need later to make big scroll.

  • Con for close - if user want to see cross info between sections and in addition visually may confuse all these open-close

  • It depends on what you are actually doing. What are the sections, and what are they used for? How often will the user want to compare the sections? – user31143 Mar 25 '14 at 9:55

If you're designing for a mobile phone - and users do not need to compare the content in each section - I'd suggest to close each section as soon as a new one is opened. I justify my approach by considering the limited screen size that users have.

If on the contrary, this sections are relative to e.g. Edit user profile - where users are likely to need to have as much content as possible displayed - I'd suggest to keep them open.

Why are you willing to use the accordion as approach? Can you give a little bit more context? What kind of content is going to be included in the page, and so on?

|improve this answer|||||
  • Thanks. It helps me :)I have 2 types - high level sections which can be considered as separated, and - within a section - some sub sections, that are comparable – Eyal Orbach Mar 25 '14 at 15:14
  • 1
    Have you considered arranging these 'separate high-level' sections into tabs? – Diego Mar 25 '14 at 23:17

Screen real estate on a mobile phone is particularly valuable - if they are focussing on a piece of information they just show them what they need to know. Wikipedia is a good example of a site with lots of content broken down into sections - users can collapse and expand each section as they like and they understand what actions they have performed. The user is in control but knows what is happening.

Wikipedia, all sections Wikipedia, two sections expanded

If you have access to users, try mocking up both and see which version they prefer. The important thing is to be consistent and simple so that users can easily understand whatever the solution is.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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