Bootstrap 5 Accordion default click behaviour

[Marc]

Windows 10
Wappler 4.1.3
Nodejs

What I have done is created a container, row, column, and added accordion cards

I am trying to get my Bootstrap 5 accordion to behave in DEFAULT mode as per Bootstrap 5 documentation where the DEFAULT behaviour is for the clicked accordion to open and the already open accordion to close.

The current Wappler behaviour out of the box is the bootstrap 5 “Always Open” behaviour. I just rewatched Ben’s YouTube tutorial and see the “Always Open” behaviour there too.

My understanding is that if I want the “Always Open” behaviour then I need to
“Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.”

Well the data-bs-parent attribute is present, yet it behaves in the “Always Open” behaviour.

I note that if I disable <<<is=“dmx-bs5-collapse”>>> I get the desired behaviour I am after, but understanding what this <<<is=“dmx-bs5-collapse”>>> does is over my head.

Can someone please let me know what I need to do to get the DEFAULT Bootstrap 5 accordion behaviour

[psweb]

You may find you are missing some scripts in the document head which can cause some frustration, I generally look at that first if its not behaving as expected.

If you have a live link where we could look at it, or if there are any errors in your console logs, or if you could show a screenshot of your head section, and possibly the code for your accordions then im sure we could figure out what the issue is.

[Marc]

Thank you for your assistance Paul, I had already looked in the head to make sure things looked correct, and to my eyes they do.

My code is below, I just created a new Wappler 4.1.3 nodejs project with Bootstrap 5

The code below is as Wappler added the accordion cards with paragraph text shortened for readability

<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="index" appConnect="local" components="{dmxBootstrap5Collapse:{}}" -->
<div class="accordion" id="accordion1">
    <div class="card">
        <div class="card-header" id="accordion1_headingOne">
            <h5 class="mb-0">
                <button id="accordion1_collapseOne_Btn" class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#accordion1_collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Collapsible Group Item #1
                </button>
            </h5>
        </div>
        <div id="accordion1_collapseOne" class="collapse" is="dmx-bs5-collapse" show="true" aria-labelledby="accordion1_headingOne" data-bs-parent="#accordion1">
            <div class="card-body">
                Anim pariatur cliche reprehenderit, ....
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="accordion1_headingTwo">
            <h5 class="mb-0">
                <button id="accordion1_collapseTwo_Btn" class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion1_collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Collapsible Group Item #2
                </button>
            </h5>
        </div>
        <div id="accordion1_collapseTwo" class="collapse" is="dmx-bs5-collapse" aria-labelledby="accordion1_headingTwo" data-bs-parent="#accordion1">
            <div class="card-body">
                Anim pariatur cliche reprehenderit, ....
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="accordion1_headingThree">
            <h5 class="mb-0">
                <button id="accordion1_collapseThree_Btn" class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion1_collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    Collapsible Group Item #3
                </button>
            </h5>
        </div>
        <div id="accordion1_collapseThree" class="collapse" is="dmx-bs5-collapse" aria-labelledby="accordion1_headingThree" data-bs-parent="#accordion1">
            <div class="card-body">
                Anim pariatur cliche reprehenderit, ....
            </div>
        </div>
    </div>
</div>

<meta name="ac:route" content="/">

Below is my head section

<html>

<head>
    <base href="/">
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="dmxAppConnect/dmxRouting/dmxRouting.js" defer=""></script>
    <script src="dmxAppConnect/dmxBootstrap5Collapse/dmxBootstrap5Collapse.js" defer=""></script>
</head>

<body is="dmx-app" id="main">
    <div is="dmx-view" id="content">
        <%- await include(content, locals); %>
    </div>
    <script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

So to confirm, the accordion section that is clicked does expand when clicked, and retract when clicked again. meaning each click toggles the specific accordion section, BUT leaves all other already open accordion sections open.

This behaviour is not default Bootstrap 5 behaviour and is controlled by the presence or not of the following in the accordion collapse section

data-bs-parent="#accordion1"

So my understanding is that with <<< data-bs-parent="#accordion1" >>> PRESENT any accordion button clicked should open that accordion and CLOSE any already open ones.

In reverse with <<< data-bs-parent="#accordion1" >>> OMITTED any accordion button clicked should open that accordion and LEAVE any already open ones alone.

In Wappler generated code <<< data-bs-parent="#accordion1" >>> is PRESENT, however it behaves as though it is omitted (have tried ommitting it to see if Wappler is working in reverse, but no such luck)

Now when I paste Bootstrap 5 code for the accordion default behaviour from their website into Wappler it works as I expect.

One key difference between Wappler generated Accordion code and Bootstrap 5 code from their website is that Wappler adds

is="dmx-bs5-collapse"

When I remove the above it works fine, and behaves as I expect.

What does <<<is=“dmx-bs5-collapse”>>> actually do, and why is it needed (am certain their is a good reason for it, but that’s where I am out of my depth)?
It is looking like a Wappler bug from what I am seeing, but am surprised this is not picked up already, which makes me question my understanding?

Any thoughts Paul, or anyone?

[psweb]

You seem to be quite correct, and I also wonder if this is perhaps a bug.

@Teodor could possibly test for us if just adding a standard accordion to a page works as per bootstrap 5 default accordion, where as an accordion opens so the others close, so default will not be “Always Open”

I tested on my side and its doing the same as you describe.

I do not think it would be a good idea to get rid of the `is=“dmx-bs5=collapse” as that controls a few other things too so may cause unexpected results further down the line.

[Marc]

Interestingly I have just tried a Bootstrap 4 accordion and that works as I expect so looks like might be a Wappler Bootstrap 5 accordion issue.

I wasn’t planning on removing `is=“dmx-bs5=collapse”, was merely narrowing the issue down and made the observation.

Will wait for Teodor to add his wisdom, thank you Paul

[Marc]

Any update on this?

[patrick]

The collapse was based on the Bootstrap 4 collapse and it seems that the parent option from Bootstrap 5 was missing. Here an update that you can test.

dmxBootstrap5Collapse.zip (722 Bytes)

We will also check if we can implement the correct Accordion structure for Bootstrap 5 instead of the accordion cards which was the way to do it in Bootstrap 4.

[Marc]

Thank you Patrick, now works as expected

[Teodor]

This has been fixed in Wappler 4.3.1