How to hide or show bootstrap 4 collapse using jquery

$('.card-header').click(function() {
//get the attr aria expanded if true means collapse is shown
  if ($(this).find('button.btn-link').attr('aria-expanded') === "true") {
    $(this).find('input[name="question"]').prop('checked', false);//unchecked
  } else {
    $(this).find('input[name="question"]').prop('checked', true);
//checked
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="card">
  <div class="card-header" id="headingOne">
    <div class="checkbox-wrap">
      <input class="form-check-input" type="checkbox" name="question" disabled>
    </div>
    <h2 id="question-1">
      <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                     lorem Ipsome
                 </button>
    </h2>
  </div>
  <hr>
  <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#faq">
    <div class="card-body">
      <p>lorem posem</p>
    </div>
  </div>
  <div class="card-header" id="headingOne">
    <div class="checkbox-wrap">
      <input class="form-check-input" type="checkbox" name="question" disabled>
    </div>
    <h2 id="question-2">
      <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                     lorem Ipsome
                 </button>
    </h2>
  </div>
  <hr>
  <div id="collapseTwo" class="collapse" aria-labelledby="headingOne">
    <div class="card-body">
      <p>lorem posem</p>
    </div>
  </div>
</div>