Add responsive tabs-to-accordion functionality

Created on 9 January 2025, 5 months ago

Problem/Motivation

Switching tabs to an accordion layout enhances usability on smaller screens, improving navigation and readability for mobile and tablet users.

Proposed resolution

Implement functionality to automatically switch tabs to an accordion layout when the screen width falls below a specified breakpoint.
Add a module configuration option to define the screen width (in pixels) for switching from tabs to accordion.

Remaining tasks

- Implement the responsive tabs-to-accordion functionality
- Add a configurable setting for the breakpoint in the module’s configuration.

Feature request
Status

Active

Version

1.0

Component

Code

Created by

🇦🇲Armenia hhvardan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @hhvardan
  • 🇦🇲Armenia hhvardan

    Tabs now automatically switch to an accordion layout when the screen width drops below a configurable breakpoint. The breakpoint is set to 768px by default but can be adjusted in the module’s configuration.
    The issue is ready for review.

  • 🇦🇲Armenia hhvardan

    Need some code refactoring

  • Issue was unassigned.
  • Status changed to Needs review 3 months ago
  • 🇦🇲Armenia hhvardan

    Made the following improvements/issue fixes:
    - Added plus/minus icon toggle for accordion headers.
    - Added logic to switch icons using .hidden and .visible classes on open/close.
    - Active tab and accordion states were not synced during screen resizing.

Production build 0.71.5 2024