Bootstrap 4 change icon in collapse

Question

I use bootstrap 4 alpha 6 version. In my page I have several collapse blocks. I want to change icon when user open/close that block. As I have several of these blocks I used class but it didnt work. Whats wrong I did? PS When I use id in JS works fine, but as you see I have several collapse block and dont want to "copy & paste".

html:

<div class="card">
    <div class="card-header">
         <div class="d-flex align-items-center justify-content-between">
              <button data-toggle="collapse" data-target="#collapse-projects" aria-expanded="false" aria-controls="collapse-projects">
                    <i class="fa fa-eye" aria-hidden="true"></i>
              </button>
         </div>
    </div>
    <div class="card-block">
        <div class="collapse" id="collapse-projects">
           ***SOME CONTENT***
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
         <div class="d-flex align-items-center justify-content-between">
              <button data-toggle="collapse" data-target="#collapse-tasks" aria-expanded="false" aria-controls="collapse-tasks">
                    <i class="fa fa-eye" aria-hidden="true"></i>
              </button>
         </div>
    </div>
    <div class="card-block">
        <div class="collapse" id="collapse-tasks">
           ***SOME CONTENT***
        </div>
    </div>
</div>

JS:

$(document).ready(function () {
            $('.collapse')
                .on('shown.bs.collapse', function() {
                    $(this)
                        .parent()
                        .find(".fa-eye")
                        .removeClass("fa-eye")
                        .addClass("fa-eye-slash");
                })
                .on('hidden.bs.collapse', function() {
                    $(this)
                        .parent()
                        .find(".fa-eye-slash")
                        .removeClass("fa-eye-slash")
                        .addClass("fa-eye");
                });
        });

Answer 1

The problem is: all your button and .collapse elements are in the same DOM level, which means when .collapse 's shown.bs.collapse or hidden.bs.collapse event is fired, the $(this).parent() in the event handler point to .collapse 's parent -- the most outside one that is not displayed in your code. Let's make it as OUTER . Then, when you invoke find , removeClass and addClass on OUTER , all icons will be changed, which is why "it didn't work".

To fix this issue, you need to make a unit wrapper which contains a group of button and .collapse elements. In this way, $(this).parent() will point to the group and only the clicked button icon is changed.

I've made a jsfiddle for the fix, please check.