So then the only way to add multiple dynamic attributes to a non App Connect element is via code. This is actually probably very niche so that’s why I didn’t even bother to report it months ago when I discovered it 
Anyway, back to i18next 
Thanks Jon, yes you are correct, there are quite a few places where I am still tweaking little things to make them prettier for smaller screen sizes, just struggling to find the time, but will get there. Thanks for pointing it out though, it could have been one of the many things i had missed.
Thank you so much, just what I was looking for.
1 Like
hI @JonL, dmx-bind:data-target on form success. basically I have an expand collapse area and inside it is a form, what I would like to do is after the form is submitted I want the area to be collapse. do you know if this is possible?
Thanks
Juan
I haven’t tried but I guess it should be possible by calling on success the collapse to close or setting a variable so that it collapses when it has certain value.
1 Like
A bit late to this party, but I’ve tried to take a run at this and I’m not even getting the icon to appear. I only have two items so I removed the index reference.
Try:
<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">
<i class="fas" dmx-class:fa-angle-right="accordion1_collapseOne.collapsed" dmx-class:fa-angle-down="!accordion1_collapseOne.collapsed"></i> 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, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</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">
<i class="fas" dmx-class:fa-angle-right="accordion1_collapseTwo.collapsed" dmx-class:fa-angle-down="!accordion1_collapseTwo.collapsed"></i> 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, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
Just checking, are you using BS4?
If using BS5, the chevron should be there included with the component
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
(sample code from https://getbootstrap.com/docs/5.0/components/accordion/)
which should give:
Screen Recording 2022-06-13 at 08.03.00
There is a FR to improve dynamic Accordions in Wappler, especially for bound data sources:
1 Like
I am using bootstrap 5. There is no chevron showing when I install Accordion Cards.
The code you’re using is BS4 code. Try the code I posted above
Thanks for your patience with me missing your original code statement. So if I’m understanding this right, there is something wrong within my Wappler setup since it does not automatically load the chevrons when I load the component?
BS5 has a different structure for accordions and include a chevron without any extra code.
Try creating a new, empty BS5 page and just add the sample accordion. It might be that something on your current page is clashing.
Thanks @bpj - I had tried that already and even on two other project - all with the same results - no chevron.
Do you have the BS5 files included on your page?
Did you try the code I posted or the code from Ben’s post that is for BS4?
Just to add here i think by default when you add a accordion in Wappler with Bootstrap 5 there is no chevron if this is what you mean by load. But Bootstrap 5 does support them with classes which is why @bpj’s code should work as it has the classes added that create the chevron.
1 Like
I’ve tried both - yours worked, Ben’s did not.
Quick Update - Placed Ben’s code on the same page where I tested your example and his code now worked.
1 Like