Change icon if accordion is open or closed

Wappler General Need Help
1

Question about Accordion Cards…
How can I make an Icon change his class (“bi-caret-down-square-fill”) in section “card-header”, only when “#accordion1” is open?

<div class="card-header text-white bg-secondary" id="headingTwo">
                                <h6 class="mb-0 text-center">
                                    <div align="center"><button class="btn bg-white" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><i class="fas fa-palette"></i>&nbsp;<i class="fa fa-search"></i>Search<i class="bi-caret-down-square-fill"></i></button></div>
                                </h6>
                            </div>

                            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion1" dmx-animate-enter.duration:2="slideInDown" dmx-animate-leave.duration:2="slideOutUp">
2

Hi.

Accordions have a default icon, which animates as per state of the collapse in it.
There are no Wappler show/hide events for accordion, like there is for regular dynamic collapse.

You can use JS if you wish to do something on accordion collapse’s show/hide events. Bind the click event to call a JS function, determine the state of collapse and do what is needed there.

1 Like
3

The best way to do this is to create style rules for whatevere it is that you want to do.

In my case I I have used existing Bootstrap style rules to make it easy on myself.

For the closed panel I have added a class of dark.

dmx-class:bg-dark="accordion1_collapseOne.collapsed"

For the open panel I have added a class of primary.

dmx-class:bg-primary="!accordion1_collapseOne.collapsed"

The code for the widget looks like

<div class="container mt-5">
    <div class="row">
        <div class="col">
            <div class="accordion" id="accordion1">
                <div class="card">
                    <div class="card-header" id="accordion1_headingOne" dmx-class:bg-primary="!accordion1_collapseOne.collapsed" dmx-class:bg-dark="accordion1_collapseOne.collapsed">
                        <h5 class="mb-0">
                            <button id="accordion1_collapseOne_Btn" class="btn btn-link text-light" 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, 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>
        </div>
    </div>
</div>
1 Like
4

I just remembered, @markoax21, the above code from @ben could work if you add is="dmx-bs5-collapse" attribute manually to the collapse in your code (which Ben’s collapse already has).

Its not added by default to the accordion added by Wappler UI.

5

Thank you. I’ll try.

6

Hi Siddant, I think that you will find that Wappler does add is="dmx-bs5-collapse" by default.

1 Like
7

Weird. I was using this just a few days ago, when I had this issue of is attribute missing. Maybe I copied the accordion code it from BS5 website and not added from Wappler.
I tried just now, and it works as you have suggested.

@markoax21 I see that your sample code is missing this attribute… could be that you added it manually as well? :thinking:

1 Like
8

Thank you everybody.
I’ve resolved in that way, without edit CSS:

<i class="bi-caret-down-square-fill" dmx-show="collapseOne.collapsed"></i><i class="bi-arrow-bar-up" dmx-hide="collapseOne.collapsed"></i>
<div id="collapseOne" class="collapse" is="dmx-bs5-collapse" aria-labelledby="headingOne" dmx-animate-enter.duration:2="slideInDown" dmx-animate-leave.duration:2="slideOutUp" data-bs-parent="#accordion1">
1 Like