Bootstrap & Javascript - Card icon is not toggling

Question

I'm using bootstrap 4 to build some cards that show/hide their content. When the card is closed the anchor icon is an 'fa-angle-down', and when the icon is clicked and the card opened, the icon toggles to 'fa-angle-up'.

When I click the first card open the toggle works, but for the second card it does not. What is wrong with the second card?

The two bootstrap cards with collapse elements:

$(document).ready(function() {
  $("#ToggleElement").on("click", function() {
    $("#ToggleElement>i.fa-angle-down").toggleClass('fa-angle-up');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card text-left mb-3 mt-3">
  <div class="card-head p-3 d-flex justify-content-between">
    <h4>heading 1</h4>
    <a id="ToggleElement" class="" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
      <i class="fas fa-angle-down" style="font-size:32px;"></i>
    </a>

  </div>
  <div class="collapse" id="collapse1">
    <div class="card card-body">
      content ...
    </div>
  </div>
</div>

<div class="card text-left mb-3">
  <div class="card-head p-3 d-flex justify-content-between">
    <h4>heading 2</h4>
    <a id="ToggleElement" class="" data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
      <i class="fa fa-angle-down" style="font-size:32px;"></i>
    </a>
  </div>
  <div class="collapse" id="collapse2">
    <div class="card card-body">
      Content ...
    </div>
  </div>
</div>

Answer 1

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

$('[id=ToggleElement]').on('click', function() {
  $(this).find('i').toggleClass('fa-angle-down fa-angle-up');
});
// $('a#ToggleElement') alternate selector

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="card text-left mb-3 mt-3">
  <div class="card-head p-3 d-flex justify-content-between">
    <h4>heading 1</h4>
    <a id="ToggleElement" class="" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
      <i class="fa fa-angle-down" style="font-size:32px;"></i>
    </a>

  </div>
  <div class="collapse" id="collapse1">
    <div class="card card-body">
      content ...
    </div>
  </div>
</div>

<div class="card text-left mb-3">
  <div class="card-head p-3 d-flex justify-content-between">
    <h4>heading 2</h4>
    <a id="ToggleElement" class="" data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
      <i class="fa fa-angle-down" style="font-size:32px;"></i>
    </a>
  </div>
  <div class="collapse" id="collapse2">
    <div class="card card-body">
      Content ...
    </div>
  </div>
</div>

Using CSS alone

#ToggleElement .fa:before {
  content: "\f106";
}

#ToggleElement.collapsed .fa:before {
  content: "\f107";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="card text-left mb-3 mt-3">
  <div class="card-head p-3 d-flex justify-content-between">
    <h4>heading 1</h4>
    <a id="ToggleElement" class="collapsed" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
      <i class="fa fa-2x"></i>
    </a>

  </div>
  <div class="collapse" id="collapse1">
    <div class="card card-body">
      content ...
    </div>
  </div>
</div>

<div class="card text-left mb-3">
  <div class="card-head p-3 d-flex justify-content-between">
    <h4>heading 2</h4>
    <a id="ToggleElement" class="collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
      <i class="fa fa-2x"></i>
    </a>
  </div>
  <div class="collapse" id="collapse2">
    <div class="card card-body">
      Content ...
    </div>
  </div>
</div>

Answer 2

You just need to access child of element clicked, and then toggle with the class to change the view of the icon.

JS:

$(document).ready(function () {
   $("a#ToggleElement").on("click", function () {
      $(this).children("i").toggleClass('fa-angle-up');
   });
});

Answer 3

You can not have two elements with the same id. Don't use the same id for your toggle item two times. Name one 'ToggleElement1' and the other one 'ToggleElement2' then it should work.