Creating a switching element, depending on which item user clicks on

[jamie2364]

Hi guys

I have been trying many different ways to do this (accordians, tabs, buttons, navigation elements etc) but I can’t figure out a way to do it. Maybe you have some ideas. What I want is an FAQ section that lists the questions on one side, and then a video element (with phone background image) on the other side that switches to different videos depending on which question they click on the opposite side. Please see the attached screenshot - questions on the left, answers in the video on the right. Is there a way to natively do this in Cornerstone?

Also, on this topic, what is the most appropriate way to resize the video element to fit ‘on top of’ the background image. I have been using margin to acheive this, but don’t like using margin if I can avoid it (for responsiveness and later editing). Maybe there is a better way!

I will leave a secure note and thank you in advance
Jamie

Screenshot 2022-02-06 at 19.25.05|689x448

[ruenel]

Hello @jamie2364,

Thanks for writing in!

Regretfully we do not have an element that can help you achieve what you want to do. Perhaps a modified Tab element might help. Please check out this old thread:

• Align Tabs v2 on the left

Kindly let us know if this has worked out for you.

[jamie2364]

Hi there,

Thanks for the suggestion. I have tried this and it works, but unfortunately, the tab title/header starts getting cut off when I extend it. Is there a way that I can extend the tab header into the middle of the page? Like, have the width as 50% of the page (except for mobile) and only when it reaches 50% does it move onto the next line? Take a look at the attached screenshot. Above I have the normal tabs elemet as you suggested. Below I also tried classic tabs and it works too but it’s also not extending across as I write in the tab header - instead, it moves onto the next line. Is there a way to resolve this? Thanks so much!! Screenshot 2022-02-07 at 09.56.22|689x439

[jamie2364]

Just following up on this. Its now working properly, but the panel on the right is not extending the full width of the page. Please see attached screenshot. What I would like is to have the panel on the right be full width of the parent column, and the video be centered in that space.

I basically want all that space to the right of the video to be removed and have the video in the center. Does this make sense? Let me know if not and I’ll make a screen recording for you.
Thanks a lot
Jamie

[tristup]

Hi Jamie,

I have checked the previously shared URL and found that the video on the right side is in the center of the column. If that is not the page to which you are referring, please share the exact URL to check further.

Thanks

[jamie2364]

no no, you’re looking at the wrong part. please go to this page: https://www.jamieharrisonguitar.com/preset-faq/ and look at the FAQ section part. Here is a screenshot with some sketches on how I want it to look.

I want the panel to go across the rest of the page and the videos be centered,

Thanks a lot

[tristup]

Hi Jamie,

I have checked the section you pointed out, and found that you have added a custom CSS code to make the left-panel width 50%. You need to add the following custom CSS code to make the right panel be 50% wider.

.x-tabs .x-tabs-panels
{
    width:50% !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks