Using MIGX with accordion

1

Good evening. I use the MIGX configuration . In a chunk

<div class="accordion-items">
    <h2 class="accordion-header" >
        <button class="accordion-buttons collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            [[+title]]
            <span class="accordion-btn"></span>
        </button>
    </h2>
    <div id="collapseExample" class="accordion-collapse collapse" aria-labelledby="" data-bs-parent="#collapseExample">
        <div class="accordion-body">
            [[+description]]
        </div>
    </div>
</div>

Good evening. I use the MIGX configuration . When one is revealed, all are revealed. How to fix it?

Video_2023-11-21_193026

2

I think what you’re missing is a unique identifier for each accordion.

In your code above we see the identifier collapseExample in four places.

Try adding -[[+idx]] to each of them:

<div class="accordion-items">
    <h2 class="accordion-header" >
        <button class="accordion-buttons collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample-[[+idx]]" aria-expanded="false" aria-controls="collapseExample-[[+idx]]">
            [[+title]]
            <span class="accordion-btn"></span>
        </button>
    </h2>
    <div id="collapseExample-[[+idx]]" class="accordion-collapse collapse" aria-labelledby="" data-bs-parent="#collapseExample-[[+idx]]">
        <div class="accordion-body">
            [[+description]]
        </div>
    </div>
</div>

Untested - so fingers crossed …

3

Thank you very much. I didn’t even pay attention to it.

1 Like
4

Glad you’ve got it working :+1:

5

thank you for your feedback

6

Just to tidy up, I’ve added an ID to your H2 tag below.

This ID is what should go in the aria-labelledby parameter for your <div id="collapseExample-[[+idx]]" ... >

See below.

Also, your data-bs-parent parameter should contain the ID of your outer div, not what I suggested earlier:

<div class="accordion" id="yourAccordionID">

    <div class="accordion-items">
        <h2 class="accordion-header" id="accordion-header-[[+idx]]">
            <button class="accordion-buttons collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample-[[+idx]]" aria-expanded="false" aria-controls="collapseExample-[[+idx]]">
                [[+title]]
                <span class="accordion-btn"></span>
            </button>
        </h2>
        <div id="collapseExample-[[+idx]]" class="accordion-collapse collapse" aria-labelledby="accordion-header-[[+idx]]" data-bs-parent="#yourAccordionID">
            <div class="accordion-body">
                [[+description]]
            </div>
        </div>
    </div>

</div>
1 Like
7

Understood you. I will apply it. thank you very much

1 Like