TYPO3 gridelements accordeon show

Question

I am using TYPO3 11.x with bootstrap_package an gridelements.

Because I want to make an accordeon with different types of content I've integrated gridelements w/dataprocessing.

It almost works, but I don't get the active variable on the selectet item. On first view each item is set to show. By clicking any accordeon-button all items are closed ( and after each item is opened by clicking any) What must I do to integrate something like <f:variable name="activeElement" value="{data.pi_flexform.default_element}" />

What is wrong? Here is my Template

<div class="container">
<div class="accordion" id="accordion-{data.uid}">
    <f:for as="row" each="{children}">
        <f:for as="column" each="{row}">
            <f:for as="content" each="{column}" iteration="i">
            <div class="accordion-item">
                <h4 class="accordion-header" id="accordion-heading-{data.uid}-{record.data.uid}">
                    <button class="accordion-button{f:if(condition: '{activeElement} == {record.data.uid}', else:' collapsed')}" type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#accordion-{data.uid}-{record.data.uid}"
                        data-bs-parent="#accordion-{data.uid}"
                        aria-expanded="{f:if(condition: '{activeElement} == {record.data.uid}', then: 'true', else: 'false')}"
                        aria-controls="accordion-{data.uid}-{record.data.uid}"
                    >
                        <a data-toggle="collapse" data-parent="#accordion{data.uid}" href="#collapse{content.data.uid}">
                           {f:if(condition: content.data.header, then: '{content.data.header}')}
                        </a>                       
                    </button>
                </h4>
                
                
                <div id="accordion-{data.uid}-{record.data.uid}" class="" aria-labelledby="accordion-heading-{data.uid}-{record.data.uid}" data-parent="#accordion-{data.uid}" data-bs-parent="#accordion-{data.uid}">
                    <div class="accordion-body">
                                                    <f:cObject data="{contentUid:content.data.uid, colPos:content.data.colPos}" typoscriptObjectPath="lib.dynamicContent_acc"/>

                    </div>
                </div>
                </div>
                </f:for>
            </f:for>
    </f:for>
</div>

thanks a lot

Answer 1

Usually accordions are either fully closed or have the first item active when you render them for the frontend. So there is no use to check for an active item unless you really reload the whole page on each click, which hopefully you don't.

If you want to make the first item active, just use the iteration of the f:for viewhelper to determine that very first item and set the active class and the appropriate aria controls there.

Another thing that seems to be wrong in your code is {record.data.uid} since there is no record available in any of your loops, just row, column and content or the original parent data, which is available in data.