Mobile Collapsible Sections (Anchored Menu Accordion)

Parent Epic: Single Post Navigation Enhancements

On mobile devices, long pages become difficult to navigate. Instead of a sticky anchor nav, we want:

• An accordion-style UI that collapses sections like Overview, Itinerary, Reviews, etc.
• Sections are closed by default, opening when tapped.
• Anchored menu functionality remains available via accordion headers.

This improves UX for mobile users and reduces excessive scrolling.

Scope

• Develop accordion component for mobile view.
• Integrate with existing page sections (block groups).
• Support smooth expand/collapse animations.
• Ensure unique IDs for anchor linking.
• Maintain accessibility (ARIA roles, focus control).
• Apply styles matching LSX Design System.

Acceptance Criteria

• Accordion sections are collapsed initially on mobile.
• Tapping section header smoothly expands content.
• Only one section open at a time (optional).
• Accessibility compliance achieved (ARIA, keyboard nav).
• Works on all single post types: Tours, Destinations, Accommodation.

References

• Related issues: Issue #374
• Figma prototype: https://www.figma.com/community/file/1397897183253228355/lsx-tour-operator-design-system