Mobile accordion UI examples

Accordion UI examples

• See the flow
  Klook: Travel & Activities↗

  Further down, there are expandable sections for 'Baggage & policy details' and 'Use promo code'.

• See the flow
  Ascend: Bible Game↗

  A modal window with a title at the top, a central image card, a primary action button, and a secondary expandable list button.

• See the flow
  Hotels.com: Book hotels & more↗

  Two collapsible sections titled 'How to collect stamps' and 'Useful tips to help you collect stamps faster' are located at the bottom.

• See the flow
  Vrbo Vacation Rentals↗

  Top navigation bar, followed by tier status and balance, a collapsible benefits card, and a progress section for the next tier.

• See the flow
  Plant Identifier, Care: Planty↗

  The bottom section contains a 'General Info' card with a collapsible chevron, providing a detailed textual explanation that 'Animalia' is a biological kingdom and not a plant disease.

• See the flow
  Fishbrain - Fishing App↗

  At the bottom, an expandable section titled 'Additional Regulations' shows the 'Regulation Boundary' as 'NV Nevada Southern Region'.

• See the flow
  Widgetable: Besties & Couples↗

  It features two expandable cards.

• See the flow
  Premier League - Scores, News↗

  Below the table, there are collapsible sections for 'Attacking', 'Teamplay', and 'Defending'.

• See the flow
  FLYP - Fashion Design Studio↗

  Top navigation bar, large product image, primary purchase button, and a collapsible description section at the bottom.

• See the flow
  Zutobi: Permit & Driving Prep↗

  The content is organized into collapsible sections, with '1.

• See the flow
  AI Song Generator: Mozart↗

  The layout features a clean, dark-themed list of expandable categories, including 'Account and Subscription', 'Technical Support', 'Credits and Purchases', 'Downloads', 'Troubleshooting Issues', and 'Feedback and Suggestions'.

• See the flow
  SnoreLab : Record Your Snoring↗

  Below this, a list of expandable filter categories is displayed: 'Remedies', 'Factors', 'Rest Rating', 'Dates', and 'Weight'.

• See the flow
  Flight Tracker +↗

  Below this, a collapsible 'Get ready for your flight' section contains a checklist with items like 'Check-in online', 'Check passport', and 'Pack for the weather', each with a checkbox, a delete icon, and a drag handle.

• See the flow
  Quinn - Audio Stories↗

  This screen displays a 'Frequently Asked Questions' page within the Quinn app, featuring a list of expandable accordion-style cards.

• See the flow
  Transit • Subway & Bus Times↗

  Vertical timeline layout with a header, followed by walking/transit segments, a horizontal schedule selector, and a detailed route summary card at the bottom.

• See the flow
  Zalando – Online fashion↗

  Top navigation bar, followed by expandable sections for product details, brand follow status, a green notification banner, and a bottom navigation bar.

• See the flow
  Bible Chat: Daily Devotional↗

  'Week 1' is shown as a collapsible section.

• See the flow
  South China Morning Post: News↗

  Each month is presented as a distinct orange horizontal card with a plus icon on the right, suggesting an expandable or selectable interface.

• See the flow
  Zumba - Dance Fitness Workout↗

  Below this, there are five collapsible sections: 'Length', 'Level', 'Intensity', 'Body Part Focus', and 'Activity Type'.

• See the flow
  Fishbox - Smart Fishing App↗

  Below this is a 'Guide' section consisting of a vertical list of expandable items: 'Time intervals', 'The day's conditions', 'Fishing forecast', and 'Apple Watch'.