On active switch toggle collapse show and hide

collapse.html

<!-- https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js -->
<!-- https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css -->

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="user_active" name="user_active">
  <label class="form-check-label" for="user_active">Select User Status</label>
</div>

<div class="collapse" id="myCollapse">
  <div class="card card-body">
    This div will be shown or hidden based on the toggle switch.
  </div>
</div>

collapse.js

const toggleSwitch = document.getElementById('user_active');
const collapseInstance = new bootstrap.Collapse('#myCollapse', {
  toggle: false
});

toggleSwitch.addEventListener('change', function() {
  if (this.checked) {
    collapseInstance.show();
  } else {
    collapseInstance.hide();
  }
});