折叠Bootstrap 4中的卡片表行时，更改Font Awesome图标

Question

I'm having an issue with changing the font awesome icon when collapsing a row in card table.

How can I create this with javascript? That, when, I click on a row the icon is changed for the item that is collapsed, and for the one that is open.

I have the following code:

Icon for opening : fas fa-chevron-down

Icon when the row is closed : fas fa-chevron-right

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <div id="accordion"> <div class="card"> <div class="list-group-item" id="headingOne"> <h5 class="mb-0"> <label data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <i class="fa fa-chevron-right"></i><label style="margin-left:20px;">Configure which userdata to show for voice interactions</label> </label> </h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> <div class="card-block"> <li class="list-group-item"> <div> <div class="card-block"> <div class="card-header"> <div class="row"> <div class="col-md-3"><b>Label</b></div> <div class="col-md-3"><b>Userdata</b></div> <div class="col-md-6 text-right"> <button type="button" data-toggle="modal" data-target="#optionModal" class="btn btn-default btn-sm"><i class="fa fa-plus-circle"></i> <b>Optie</b> toevoegen</button> </div> </div> </div> <div> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> <div class="col-md-3"> Label sdlsdkfjsdlfksdj </div> <div class="col-md-3"> Userdata dflskdfjds </div> <div class="col-md-6 text-right"> <span><i class="fa fa-pencil-alt" style="font-size:20px;"></i></i></span> <span><i class="fa fa-trash-alt" style="font-size:20px; margin-left:20px;"></i></i></span> </div> </li> </ul> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> <div class="col-md-3"> Label sdlsdkfjsdlfksdj </div> <div class="col-md-3"> Userdata dflskdfjds </div> <div class="col-md-6 text-right"> <span><i class="fa fa-pencil-alt" style="font-size:20px;"></i></i></span> <span><i class="fa fa-trash-alt" style="font-size:20px; margin-left:20px;"></i></i></span> </div> </li> </ul> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> <div class="col-md-3"> Label sdlsdkfjsdlfksdj </div> <div class="col-md-3"> Userdata dflskdfjds </div> <div class="col-md-6 text-right"> <span><i class="fa fa-pencil-alt" style="font-size:20px;"></i></i></span> <span><i class="fa fa-trash-alt" style="font-size:20px; margin-left:20px;"></i></i></span> </div> </li> </ul> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> <div class="col-md-3"> Label sdlsdkfjsdlfksdj </div> <div class="col-md-3"> Userdata dflskdfjds </div> <div class="col-md-6 text-right"> <span><i class="fa fa-pencil-alt" style="font-size:20px;"></i></i></span> <span><i class="fa fa-trash-alt" style="font-size:20px; margin-left:20px;"></i></i></span> </div> </li> </ul> </div> </div> </div> </li> </div> </div> </div> </div> <div class="card"> <div class="list-group-item" id="headingTwo"> <h5 class="mb-0"> <label class="collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <i class="fa fa-chevron-right"></i><label style="margin-left:20px;">Con</label> </label> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-body"> other item here ... </div> </div> </div> <div class="card"> <div class="list-group-item" id="headingThree"> <h5 class="mb-0"> <label class="collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <i class="fa fa-chevron-right"></i><label style="margin-left:20px;">ctions</label> </label> </h5> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion"> <div class="card-body"> other item here ... </div> </div> </div> </div> 

What I have to far :

<script>

$(document).ready(function () {
    $('.collapse')
        .on('shown.bs.collapse', function(event) {
          event.stopPropagation();
          console.log("open");
            $(this)
                .parent().parent()
                .find(".fa-chevron-down")
                .removeClass("fa-chevron-down")
                .addClass("fa-chevron-right");
        }).on('hidden.bs.collapse', function(event) {
            console.log("closed");
         event.stopPropagation();
            $(this)
                .parent().parent()
                .find(".fa-chevron-right")
                .removeClass("fa-chevron-right")
                .addClass("fa-chevron-down");
        });
});

</script>

But it collapses for all the records, how to chance this for only the records that is open/closed.

Answer 1

You only need to go up 1 parent level...

$(document).ready(function () {
    $('.collapse')
        .on('shown.bs.collapse', function(event) {
          event.stopPropagation();
          console.log("open");
            $(this)
                .parent()
                .find(".fa-chevron-down")
                .removeClass("fa-chevron-down")
                .addClass("fa-chevron-right");
        }).on('hidden.bs.collapse', function(event) {
            console.log("closed");
         event.stopPropagation();
            $(this)
                .parent()
                .find(".fa-chevron-right")
                .removeClass("fa-chevron-right")
                .addClass("fa-chevron-down");
        });
});

https://www.codeply.com/go/ePRWZuEK2K