Collapse all items when Tabs become Accordions on tablet/mobile

[dburke-ux]

Prerequisites

• I have searched for similar feature requests in both open and closed discussions and cannot find an existing request.
• I have verified that the feature is still missing from the latest stable versions of Elementor or Elementor Pro.

What problem is your feature request going to solve? Please describe..

When tabs become accordions in a responsive breakpoint, the first accordion is expanded. I understand why this seems logical; because the first tab is visible on desktop so this keeps it consistent across views. However, on desktop, the tabs titles are all immediately visible, allowing users to quickly toggle. On smaller screens with accordions, the first expanded item pushes the others out of view. So, collapsing all accordions will make it more efficient for users to see all the items on the page and choose which item to expand.

Describe the solution you'd like.

Add the Default State: First Expanded/All Collapsed control to Tabs widget that we have on the Accordion widget. This should only effect the breakpoints where tabs are accordions. The first tab should still be open by default on desktop.

Describe alternatives you've considered.

This can be solved with some hacky JS to collapse the first item on pageload, but it's unnecessary FE code and it can cause some layout shifts.

Additional context

No response

Agreement

• I agree that my request may be closed without action if it doesn't meet all the requirements.