How to open Dynamic Collapse Card which has been clicked

Wappler General Need Help
1

Hi,

I have used accordion with repeat for displaying data on the page using nested query.
I am facing issues opening only the content of the tab i have clicked. I am sharing screenshot explaining the issue.

image
image1371×693 78.6 KB

You can recreate the accordion using the code shared below:

<div class="row">
    <div class="col">
        <div class="accordion" id="accordion1" is="dmx-repeat" dmx-bind:repeat="2">
            <div class="card mb-2">
                <div class="card-header bg-primary" dmx-bind:id="'accordion1_heading'+$index">
                    <h5 class="mb-0">
                        <button dmx-bind:id="'accordion1_collapse'+$index+'_Btn'" class="btn btn-link text-light w-100 text-start" type="button" data-bs-toggle="collapse" dmx-bind:data-bs-target="#accordion1_collapse{{$index}}" aria-expanded="true" dmx-bind:aria-controls="collapse{{$index}}">Link</button>
                    </h5>
                </div>
                <div dmx-bind:id="'accordion1_collapse'+$index" class="collapse" is="dmx-bs5-collapse" dmx-bind:aria-labelledby="accordion1_heading{{$index}}" data-bs-parent="#accordion1">
                    <div class="card-body" is="dmx-repeat" id="repeat3" dmx-bind:repeat="2">
                        <div class="row">
                            <div class="col">
                                <div class="card mb-1">
                                    <div class="card-header style22" dmx-bind:id="'card1_heading'+$index">
                                        <h5 class="mb-0"><button dmx-bind:id="'card1_collapse'+$index+'_Btn'" class="btn btn-link text-light" type="button" data-bs-toggle="collapse" dmx-bind:data-bs-target="#card1_collapse{{$index}}" aria-expanded="true" dmx-bind:aria-controls="collapse{{$index}}">Level</button>
                                        </h5>
                                    </div>
                                    <div dmx-bind:id="'card1_collapse'+$index" class="collapse" is="dmx-bs5-collapse" dmx-bind:aria-labelledby="card1_heading{{$index}}" data-bs-parent="">
                                        <div class="container mt-2">
                                            <div class="row">
                                                <div class="col">
                                                    <div class="table-responsive text-center small">
                                                        <table class="table table-striped table-bordered table-hover table-sm align-middle text-center small">
                                                            <thead class="align-middle text-center small table-group-divider table-primary">
                                                                <tr>
                                                                    <th>Inst course ID (H)</th>
                                                                    <th>Course year ID (H)</th>
                                                                    <th>Course Year</th>
                                                                    <th>Sem ID (H)</th>

                                                                </tr>
                                                            </thead>
                                                            <tbody is="dmx-repeat" dmx-generator="bs5table" id="tableRepeat2" class="align-middle text-center" dmx-bind:repeat="1">
                                                                <tr>
                                                                    <td dmx-text="instCourse_id"></td>
                                                                    <td dmx-text="courseYearID"></td>
                                                                    <td dmx-text="courseYear"></td>
                                                                    <td dmx-text="semID"></td>

                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
2

Probably you have modified your code in order to post it here...

BUT, I tested exactly the code you provided above and it works perfect as it should!

Check your original code my friend, if it follows the structure of the sample code you have shared

*Did you check it in your browser? or run just within Wappler?

3

Does that mean, if i click on any accordion button link then dynamic collapse linked with that index opens for all the accordion tabs on the page?

4

I haven't paid attention to the collapses...
You are right:

The problem was that you have nested repeats and by using just $index is not enough because in the nested repeat the value of $index is reset.

Here is the code i modified a little and added an extra variable inside the accordion Card and before the nested repeat:

image
image356×665 14 KB

In this variable we save the current accordion item's $index.

So, now on each nested repeat we assign a dynamic attribute (id, data-bs-toggle, data-bs-target etc) by using the variable and the repeat's $index and this make sure that all items are unique.
For example: button dmx-bind:id="'btn'+var_Index.value+$index"

Here is the code:

<div class="container">
        <div class="row">
            <div class="col">
                <div class="accordion" id="accordion1" is="dmx-repeat" dmx-bind:repeat="3">
                    <div class="card">
                        <div class="card-header p-0" dmx-bind:id="'accordion1_heading'+$index">
                            <h5 class="mb-0">
                                <button dmx-bind:id="'accordion1_collapse'+$index+'_Btn'" class="btn link-primary w-100" type="button" data-bs-toggle="collapse" dmx-bind:data-bs-target="#accordion1_collapse{{$index}}" aria-expanded="true" dmx-bind:aria-controls="collapse{{$index}}">
                                    Link_{{$index}}
                                </button>
                            </h5>
                        </div>
                        <div dmx-bind:id="'accordion1_collapse'+$index" class="collapse" is="dmx-bs5-collapse" dmx-bind:aria-labelledby="accordion1_heading{{$index}}" data-bs-parent="#accordion1">
                            <dmx-value id="var_Index" dmx-bind:value="$index"></dmx-value>
                            <div class="card-body" is="dmx-repeat" id="repeat1" dmx-bind:repeat="3">
                                <div class="row">
                                    <div class="col">
                                        <button dmx-bind:id="'btn'+var_Index.value+$index" class="btn" data-bs-toggle="collapse" dmx-bind:data-bs-target="#collapse{{var_Index.value}}{{$index}}">Level{{var_Index.value}}{{$index}}</button>
                                        <div class="collapse" dmx-bind:id="'collapse'+var_Index.value+$index" is="dmx-bs5-collapse">
                                            <p class="text-center">paragraph_{{var_Index.value}}{{$index}}<br>Collapse body text goes here.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

If you have any question drop it here

Cheers :beer:

5

It's working!!
Thanks @famousmag for the solution :slightly_smiling_face:

1 Like