Advanced tabs and accordion

[Communications]

Hi there, I would like to create advanced tabs/accordion where I could toggle the visibility of DIVs and such when clicking on tab or accordion items. Similar to what they use on this page.

Can I use custom attributes? Or do I need to use custom javascript? It seems like it should be simple, but I can’t figure it out on my own. I wish the tabs and accordion elements were more advanced, similar to the new modal elements.

Anyway, any help is appreciated

[tristup]

Hi Ben,

Thanks for reaching out.
What you are trying acheive is required some customization and for that, you need to use custom CSS and JavaScript. I would suggest you check the following thread which might help you in creating the Tabs side.

Tab v2 - Side tab

Hi There, It’s possible with the custom CSS. Please add the left class to your tab element: [image] Then add this custom CSS under Theme Options > CSS: .x-tabs.left { display: flex; } .x-tabs.left .x-tabs-list { float: left; min-width: 200px; } .x-tabs.left .x-tabs-list ul { flex-direction: column; } .x-tabs-list button:hover, .x-tabs-list button[class*="active"] { border: none; } Hope it helps

Please remember that the code in the reference thread 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. Further customization should be directed to a third-party developer or you can avail One, where we answer the questions beyond normal theme support.

Thanks