Swtiched to BS5 from BS4, accordion cards won't expand

Wappler General How To
#1

Not sure if it’s related to the title or not. Accordion cards, inside a tab pane.

Tab Pane 1
Container
Accordion Cards
Tab Pane 2
Container
Accordion Cards

Accordion cards were working. Now aren’t, they’re all collapsed and won’t expand. They have id’s like they should. I played around with bootstrap themes a bit, reverted back to the default when I didn’t get what I was after. After this is when they stopped working.

I don’t even know where to start to looking because the inspector only shows a source map error for Bs5.

Bootstrap 5 installed local. Anyone have any ideas?

                <div class="card">
                  <div class="card-header" dmx-bind:id="'ticketAccordionProd_heading'+$index">
                    <h5 class="mb-0">
                      <button dmx-bind:id="'ticketAccordionProd_collapse1-'+$index+'_Btn'" class="btn btn-link" type="button" dmx-bind:data-target="#ticketAccordionProd_collapse{{$index}}" aria-expanded="true" dmx-bind:aria-controls="collapse{{$index}}" data-bs-toggle="collapse">{{pname+' $'+price*quantity+'  -   '}} QTY: <b>{{quantity}}</b></button>

                    </h5>
                  </div>
                  <div dmx-bind:id="'ticketAccordionProd_collapse'+$index" class="collapse" is="dmx-bs5-collapse" dmx-bind:aria-labelledby="ticketAccordionProd_heading{{$index}}" data-bs-parent="#ticketAccordionProd">
                    <div class="card-body">
                      <p class="card-text">{{pmanufacturer+' - '+pmfpartnumber}}</p>
                      <button id="getProdBtn" class="btn btn-outline-secondary" dmx-on:click="getSingleProduct.load({tickprodid: id},true)" data-bs-toggle="modal" data-bs-target="#editTicketProduct"><i class="fa fa-pencil-square-o"></i>&nbsp;Edit</button>
                      <p class="card-text" dmx-text="pdescription">With supporting text below as a natural lead-in to additional content.</p>
                    </div>
                  </div>
                </div>
              </div>
#2

try these changes:

  1. change:
    dmx-bind:data-target="#ticketAccordionProd_collapse{{$index}}"
    to
    data-bs-target="#ticketAccordionProd_collapse{{$index}}"

  2. set a static id for your collapse toggle button: (for example)
    <button id="ticketAccordionProd_collaps'_Btn" dmx-bind:id="'ticketAccordionProd_collapse1-'+$index+'_Btn'"
    and for your collapse: (for example)
    <div id="ticketAccordionProd_collapse" dmx-bind:id="'ticketAccordionProd_collapse'+$index"

*static ids will be replaced by the dynamic ids on render

After making these changes, please inform us of the result or issues

#3

made those changes… still not working.

since i’m setting a static id for the button, should this have been removed?

dmx-bind:id="'ticketAccordionProd_collapse1'+$index+'_Btn'"

here is what i have now.

<div class="accordion" id="ticketAccordionProd" is="dmx-repeat" dmx-bind:repeat="getTicketProducts.data.ticketProductsAll">
                <div class="card">
                  <div class="card-header" dmx-bind:id="'ticketAccordionProd_heading'+$index">
                    <h5 class="mb-0">
                      <button id="ticketAccordionProd_collapse_Btn" dmx-bind:id="'ticketAccordionProd_collapse1'+$index+'_Btn'" class="btn btn-link" type="button" data-bs-target="#ticketAccordionProd_collapse{{$index}}" aria-expanded="true" dmx-bind:aria-controls="collapse{{$index}}" data-bs-toggle="collapse">{{pname+' $'+price*quantity+'  -   '}} QTY: <b>{{quantity}}</b></button>

                    </h5>
                  </div>
                  <div id="ticketAccordionProd_collapse" dmx-bind:id="'ticketAccordionProd_collapse'+$index" class="collapse" is="dmx-bs5-collapse" dmx-bind:aria-labelledby="ticketAccordionProd_heading{{$index}}" data-bs-parent="#ticketAccordionProd">
                    <div class="card-body">
                      <p class="card-text">{{pmanufacturer+' - '+pmfpartnumber}}</p>
                      <button id="getProdBtn" class="btn btn-outline-secondary" dmx-on:click="getSingleProduct.load({tickprodid: id},true)" data-bs-toggle="modal" data-bs-target="#editTicketProduct"><i class="fa fa-pencil-square-o"></i>&nbsp;Edit</button>
                      <p class="card-text" dmx-text="pdescription">With supporting text below as a natural lead-in to additional content.</p>
                    </div>
                  </div>
                </div>
              </div>
#4

I had to recreate the accordion completely. Nothing ever gave an error, the data was there, but it wouldn’t expand. There were two accordions. In two separate tabs. They both stopped working for some reason.

Guess I’ll get to re-creating the other one as well.

1 Like
#5

I actually didn’t have to recreate the second accordion. For some reason wappler removed the dmx-bind:data-bs-target, even after i made the change. examined the newly created accordion that was working with the code for the one that stopped. Looking at my first post, this was probably incorrect for BS5 but would work for BS4? dunno. it’s working now.

1 Like