CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
Anna
Anna

Reputation: 11

Bootstrap Accordion broken after upgrade

I've been looking around forums to try and find something similar but haven't been able to pin it down. Here's code block with my code simplified:

<div id="line-up" class="container">
        <div class="text-center">
            <button class="btn btn-default filter-button m-1" data-toggle="collapse" data-target="#main" data-parent="#line-up"><p>Mainstage</p></button>
            <button class="btn btn-default filter-button m-1" data-toggle="collapse" data-target="#dub" data-parent="#line-up"><p>Dub Castle</p></button>
            <button class="btn btn-default filter-button m-1" data-toggle="collapse" data-target="#kids" data-parent="#line-up"><p>Kids Village</p></button>
            <p class="mt-2 mb-2"><span class="text-danger">The line-up is <u>not</u> complete!</span> Estimated date of completion is June.</p>
        </div>
        <div class="accordion-group">
            <div class="collapse show indent" id="main">
                XXX
            </div>
            <div class="collapse indent" id="dub">
                YYY
            </div>
            <div class="collapse" id="kids">
                ZZZ
            </div>
        </div>
    </div>

I used THIS code pen to test out if my bootstrap CSS or JS files were at fault.

This code worked fine with Bootstrap CSS & JS until I upgraded from 4.0.0 to 4.2.1. I haven't been able to figure out the issue. The buttons at the top are meant to switch between XXX, YYY and ZZZ with XXX being visible at the beginning and being hidden when either YYY or ZZZ are brought up.

Thanks for any help!

Upvotes: 0

Views: 394

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362730

The data-parent changed after 4.1. It should be placed in the collapsible div instead of the collapse toggle...

<div class="accordion-group">
    <div class="collapse show indent" id="main" data-parent="#line-up">
        XXX
    </div>
    <div class="collapse indent" id="dub" data-parent="#line-up">
        YYY
    </div>
    <div class="collapse" id="kids" data-parent="#line-up">
        ZZZ
    </div>
</div>

https://www.codeply.com/go/BPfTFHAj4E

Upvotes: 1

Related Questions