Accordion Content in Separate Column

[zackfiske]

I am trying to reproduce the accordion styling that is seen on certain sites (like Google). They are able to place the content of an accordion dropdown in a separate column. This allows for a person to click each accordion item header and show the corresponding accordion content in the next column. How can this be done with the Accordion element? Please see link and screenshot for examples:

This is the Pixel 8 Pro webpage. You can see the use of this accordion technique in action: https://store.google.com/product/pixel_8_pro?hl=en-US&pli=1

Here is the screenshots:

[ruenel]

Hey @zackfiske,

Thanks for writing in! Yes, this is possible. You can have something like this element structure:

The Row element has the data-x-slide-context custom attribute.

Then the Accordion Item will have the data-x-slide-goto so that when a user clicks on the accordion item, the slider on the left column will display the corresponding slide.

Best Regards.

[zackfiske]

Ok great! One question: Do I have to use a slider for this? I was hoping to utilize the accordion only.

[ruenel]

Hey @zackfiske,

You will have to use both elements. The Accordion element alone cannot accomplish what you have in mind.

Cheers.

[zackfiske]

Ok. Thanks for the clarification!

[ruenel]

You are most welcome.