Vuetify: [Feature Request] Horizontal expansion panels

[bkuri]

What problem does this feature solve?

Horizontal accordions would be ideal for navigating timeline or page-like content in a more natural fashion. As an example, I am currently developing a banner creator where you can of course add/remove slides to each banner. It would feel more intuitive if the expandable panels were horizontal in order to navigate between slides from left to right and back.

What is your proposed solution?

Adding a horizontal attribute to v-expansion-panel should suffice. Maybe a couple more attributes to specify header labels to start from top to bottom (default) or bottom to top as in the following examples:

top-to-bottom:
https://davidwalsh.name/demo/css-vertical-text.php

bottom-to-top:
https://cdn.css-tricks.com/wp-content/uploads/2014/03/90-deg.png

A link to a more basic example of a horizontal accordion (second one down):
https://www.jqueryscript.net/demo/Simple-Vertical-Horizontal-Accordion-Plugin-with-jQuery-asAccordion/#toc2

[gabecoelho]

I second this request. Also, I don't know if @bkuri meant this as well but I would also love to see normal (horizontal) rows that expand sideways/horizontally.

BTW, great work on the examples, @bkuri.

[johnleider]

This is something that can be done in userland after v1.3 with the introduction of v-item-group. I'll tag so I remember to double check before release.

[johnleider]

As promised, available in v-item-group in v1.3

[MartinX3]

How to use it with the 1.3 beta? :)
https://next.vuetifyjs.com/en/components/item-groups

Ahhh:
I could do
<v-flex :xs10="!showSecondItem" :xs5="showSecondItem">

[Djshn]

@MartinX3 Would you please show an example of how to do horizontal expand/collapse with <v-item-group>?

[rustyx]

ditto. What would be the most elegant way to implement the expand/collapse of v-item-group?

[toddsampson]

+1 for example

[loancarre]

please, i would like a example too

[vegerot]

@johnleider would you be able to provide an example of horizontal
expansion-panels?

[zerothree3782]

@johnleider would you be able to provide an example of horizontal expansion-panels?