Linking multiple accordions in one row

I have 3 accordion elements, 1 in each column of a row divided into 3 columns. I open the bottom tab of one accordion element and it displays. All tabs in the element are linked but the 3 individual elements are not linked. I want to link all 3 accordion elements so that if I open a tab in element 2 for example it closes the tab in accordion element 1.

If this is not possible then is it possible to columnize an accordion into thirds?

Hi @geofftuckerdvm,

Thanks for writing in.

I could not guarantee that we could help you with this customization or if it is possible. Please share us first your setup so we could fully understand what you want to achieve.

Thank you so much.

There are 3 columns in each row each with multiple accordion tabs. Within each accordion the tabs are linked so that when one tab is opened, the one already opened then closes. But the tabs between all the other accordions on the page are not linked so that opening one tab in any accordion does not close an already opened tab in another accordion on that page.

I want to have all the tabs on this page linked so that there is only one tab opened at any time. Is this possible?

Hey there,

This is not possible using the Cornerstone element and the Columnize feature is only for text. It is possible using the shortcode version and using the old content band and column shortcodes to structure the accordion items. Here’s a sample:

[accordion id="my-accordion"][content_band padding_top="0px" padding_bottom="0px"][column type="1/3"][accordion_item title="Accordion Title" parent_id="my-accordion"]Your text here[/accordion_item][/column][column type="1/3"][accordion_item title="Accordion Title" parent_id="my-accordion"]Your second accordion text[/accordion_item][/column][column type="1/3"][accordion_item title="Accordion Title" parent_id="my-accordion"]Your third accordion text[/accordion_item][/column][/content_band][content_band padding_top="0px" padding_bottom="0px"][column type="1/3"][accordion_item title="Accordion Title" parent_id="my-accordion"]Your text here[/accordion_item][/column][column type="1/3"][accordion_item title="Accordion Title" parent_id="my-accordion"]Your second accordion text[/accordion_item][/column][column type="1/3"][accordion_item title="Accordion Title" parent_id="my-accordion"]Your third accordion text[/accordion_item][/column][/content_band][/accordion]

Please note that you could easily break the structure by omitting brackets, quotes, closing shortcode tags, etc. Also, shortcodes must have no space between them like my sample. With that said, issues arising from the use of this structure would be outside the scope of our support because this is not the intended design/layout of the accordion and based on my example, it works provided that everything is complete.

Thank you for your understanding.

Thanks so much Christian for taking the time to reply so thoroughly. I have some other things on my plate but will be diligent in adding this code correctly when the opportunity comes. This was a good deed by you. Thanks, Doc T

You’re welcome.