[accordion] Vertical alignment

[kirill-develops]

Summary 💡

Essentially your current accordion components but aligned vertically. The use cases are endless but an example would be a hero panel with an open accordion and as you click on the other accordions to expand, the open one shuts. Another use would be to have a horizontal list of cards with one open, and as you hover over the adjacent cards they expand.

I've provided multiple examples below:
example 1: hero bar implementation. features to add: click to expand or maintain expansion. after expansion becomes interactable in the case there are buttons or links and so on.

example 2: similar to above but in a card version

example 3: basic written style. the vertically aligned text is great addition

Examples 🌈

• https://codepen.io/alvarotrigo/pen/eYyOLvd
• https://codepen.io/alvarotrigo/pen/xxpKaXP
• https://codepen.io/alvarotrigo/pen/jOYNvGP

Motivation 🔦

Building a dynamic page for travel location booking forms. My vision is to have a giant hero photo of the location with two vertical accordions on the right-hand side. the first accordion is the details of the location that expands halfway and shrinks the photo to 50%. the second accordion is the booking form that collapses both the image and details to the left

[siriwatknp]

Labelled base to take this into consideration when building Accordion API

[kirill-develops]

Thanks, team!

[mj12albert]

✨ demo here: https://deploy-preview-577--base-ui.netlify.app/experiments/accordion-horizontal/

[siriwatknp]

✨ demo here: https://deploy-preview-577--base-ui.netlify.app/experiments/accordion-horizontal/

Awesome!

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@kirill-develops How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.