django_bootstrap_icons: change icon on click

[Arno Schuurs]

Hello,

After our intern left, I took over his code.

I am wondering if it is possible to change the button icon after clicking it.

Example:

expand, use a 'chevron-down'

collapse , use a 'chevron-up'

The code that I have:

{% load django_bootstrap_icons %}

...

<button class="btn btn-sm p-1
                                       {% if lane.type == 'PRE' %}btn-outline-dark {%else %} btn-outline-light {% endif %}
                                      small block-collapsebtn"
                                              type="button"
                                              id="CollapseBtn"
                                              data-toggle="collapse"
                                              data-target="#collapsable-{{block.uuid}}"
                                              aria-expanded="false"
                                              aria-controls="collapseExample"
                                              onclick="change_btn(this)"
                                      >{% bs_icon 'chevron-down' %}</button>

Could you help out?

Thank you.

Best Regards

Arno Schuurs

[Fab]

Hi Arno,

You will have to change the buttons value (its text) with Javascript.

In the change_bnt() function you can change the button's value with:
document.getElementById("CollapseBtn").value="something"; 

You could toggle the value depending on what the value already is:
if (value == 'a') value = 'b'

else value = 'a'

You could pass the chevron values into the Javascript by button the value in a var on the template:
var chevronDown = {% bs_icon 'chevron-down' %};

Hope this helps.

Fab

[Arno Schuurs]

I have this working, but not yet with {% bs_icon 'chevron-down' %} and {% bs_icon 'chevron-down' %}

                                       <script>
                                         function change_btn(objButton)
                                         {
                                           var btnval = objButton.innerHTML;
                                           var btnUp = "up";
                                           var btnDown = "down";
                                           if (btnval==btnDown) objButton.innerHTML = btnUp;
                                           else objButton.innerHTML = btnDown;
                                         }
                                       </script>

                                       <button class="btn btn-sm p-1
                                       {% if lane.type == 'PRE' %}btn-outline-dark {%else %} btn-outline-light {% endif %}

                                      small tasblock-collapsebtn"

                                              type="button"
                                              id="CollapseBtn"
                                              data-toggle="collapse"

                                              data-target="#collapsable-{{tasblock.uuid}}"

                                              aria-expanded="false"
                                              aria-controls="collapseExample"
                                              onclick="change_btn(this)"

                                      >down</button>

Op donderdag 15 juli 2021 om 20:56:50 UTC+2 schreef Fab:

[Arno Schuurs]

This seems to work.

                                       <script>
                                         function change_btn(objButton)
                                         {
                                           var btnval = objButton.innerHTML;

                                           var btnUp = '{% bs_icon "chevron-up" %}';
                                           var btnDown = '{% bs_icon "chevron-down" %}';

                                           if (btnval==btnDown) objButton.innerHTML = btnUp;
                                           else objButton.innerHTML = btnDown;
                                         }
                                       </script>

                                       <button class="btn btn-sm p-1
                                       {% if lane.type == 'PRE' %}btn-outline-dark {%else %} btn-outline-light {% endif %}

                                      small tasblock-collapsebtn"

                                              type="button"
                                              id="CollapseBtn"
                                              data-toggle="collapse"

                                              data-target="#collapsable-{{tasblock.uuid}}"

                                              aria-expanded="false"
                                              aria-controls="collapseExample"
                                              onclick="change_btn(this)"
                                      >{% bs_icon "chevron-down" %}</button>

Op donderdag 15 juli 2021 om 20:56:50 UTC+2 schreef Fab:

Hi Arno,

[Fab]

Yea that's how I'd handle it.