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.
