Scoping of accordion

This issue came up in a recent support request of mine, and I want to post it here for further discussion.

Accordions only allow text/html in their content. The only cornerstone-way to place complex (formated and styled) content in there is through components, formerly global blocks. So far so good.
Sometimes the accordion is placed inside a loop, e.g. to create a list of FAQs. The data for the FAQ may be sitting in an ACF, and the loop reads that data in, you can reference it with the appropriate {{dc:… }} fields in the header and content of the accordion. This works well if the FAQ entries are simple or formated text. So far so good.
But let’s say now that the answers of the FAQ are always standardized formated “articles”, with headline, an image, maybe a bullet list, and a paragraph of text. No problem to set this “article” up as a component, and put the component shortcode into the content of the accordion.
But the component is executed BEFORE the looper is executed. For example, if the “article” contains a text element with {{dc:post:titel}} in it, that will turn into static text (the titel of the page that contains the looper) first, only then the looper will be executed, and it will result in several (senseless) identical copies of stuff, because there are no “live” DC-fields left anymore to populate the “article” with content from the FAQ post type.

This is specific to the accordion. If I place the same component shortcode (the “article”) into a text field (which is in a looper), the component is NOT executed first, but the DC-fields remain live and are being looped over in the appropriate context set up by the looper.

To me, that seems like an implementation bug in accordions.

Yeah I’ve been thinking more about accordions lately. First off they should really be able to accept child elements because component shortcode is more of a workaround then anything in these scenarios. I’ll take note of the fact they are running before looper code and make sure that works as well. Thanks for the info, have a great day.

1 Like

Thank you @charlie. Do you think that there will be a quick resolution to is? I am not talking about the accordion accepting child elements, but the order of execution, so that you can loop over dynamic content fields being brought in by the component.

1 Like

Don’t forget about the tabs element. That one doesn’t currently support child elements either.

2 Likes

@striata The more I think about that issue, I think this might be a shortcode limitation or wordpress renders shortcode first. I think if we just got child elements accepted into accordions I doubt you’ll have this issue with your components. Of course if this issue persists even when using child elements, then there’s definitely something wrong with Accordions, but I think the quickest resolution would actually be to get child elements into the accordions.

Yes tabs are also on the list for child elements. Same with tabs accepting looper providers and consumers.

2 Likes

I don’t think that this is the issue here. When I place the component shortcode into a text element, it stays “live”, so to say. If the component contains an element with {{dc:post:titel}} in it, then this will (eventually) be converted into the Titel of the page where the shortcode is inserted. But: if the text element containing the shortcode is placed inside a looper, then it will output the Titels of the looped post. That’s what I mean with “it stays life”. Placed in an accordion, however, it outputs the Titel of the page always, not the Titel of the looped posts. So I do think that something is off in the implementation of accordions.
Interstingly, within the cornerstone builder preview, the first looped item does show the post Titel, all the following items show the page Titel.

Regarding your remark that the problem would be solved if one could place child elements in accordions: probably yes. One could then place the component element in there. Of course, that component should “stay life” then, and should not suffer the same problem (in the “new” accordion) as the shortcode suffers in the current accordion.

1 Like