Repeat Accordion won't collapse

Wappler General How To
#1

I have an accordion which is a repeat region. Inside there is another dependent repeat region. The data all comes out right, but the accordions won’t collapse.

<div class="accordion" id="accordionExample" is="dmx-repeat" dmx-bind:repeat="sc_category_tripbits.data.repeat1">
    <div class="card z-depth-0 bordered">
        <div class="card-header" id="heading{{category_id}}">
            <h5 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse{{category_id}}" aria-expanded="true" aria-controls="collapse{{category_id}}">
                    {{category}}
                </button>
            </h5>
        </div>
        <div id="collapse{{category_id}}" class="collapse show" aria-labelledby="heading{{category_id}}" data-parent="#accordionExample">
            <div class="card-body">
                <ul dmx-repeat:repeat_tripbits="qry_tripbits" dmx-style:margin-bottom="0">
                    <li><a dmx-bind:href="link" dmx-text="title" target="_blank"></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Can anyone spot what I’m doing wrong??
Thanks.

#2

Not sure it is your actual issue, but off the top I’m seeing a few “id=” parameters that are using {{ }} within. Those would need “dmx-bind:id=” in order to work.

–Ken

#3

Thanks. Have changed those but still not working.

<div class="accordion" id="accordionExample" is="dmx-repeat" dmx-bind:repeat="sc_category_tripbits.data.repeat1">
    <div class="card z-depth-0 bordered">
        <div class="card-header" dmx-bind:id="heading{{category_id}}">
            <h5 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse{{category_id}}" aria-expanded="true" aria-controls="collapse{{category_id}}" dmx-html="">
                    <img dmx-bind:src="'/global_assets/maps/mapicons/'+category+'.png'">
                    {{category}}
                </button>
            </h5>
        </div>
        <div dmx-bind:id="collapse{{category_id}}" class="collapse show" aria-labelledby="heading{{category_id}}" data-parent="#accordionExample">
            <div class="card-body">
                <ul dmx-repeat:repeat_tripbits="qry_tripbits" dmx-style:margin-bottom="0">
                    <li><a dmx-bind:href="link" dmx-text="title" target="_blank"></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
#4

Maybe this will help as reference?

#5

Got it! Thanks. The {{$quot;#quot;}} from that example didn’t work but changing the data target to dmx-bind:data-target did the trick. Here’s the working example for anyone else that’s stumped on this.

<div class="accordion" id="accordionExample" is="dmx-repeat" dmx-bind:repeat="sc_category_tripbits.data.repeat1">
    <div class="card z-depth-0 bordered">
        <div class="card-header" dmx-bind:id="heading{{category_id}}">

            <h5 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" dmx-bind:data-target="#collapse{{category_id}}" aria-expanded="true" aria-controls="collapse" dmx-html="">
                    <img dmx-bind:src="'/global_assets/maps/mapicons/'+category+'.png'">
                    {{category}}
                </button>
            </h5>
        </div>
        <div dmx-bind:id="collapse{{category_id}}" class="collapse" aria-labelledby="heading{{category_id}}" data-parent="#accordionExample">
            <div class="card-body">
                <ul dmx-repeat:repeat_tripbits="qry_tripbits" dmx-style:margin-bottom="0">
                    <li><a dmx-bind:href="link" dmx-text="title" target="_blank"></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
1 Like