Javascript - Change button text doesn't work

Question

I have the following piece of code I need in order to update a bootstrap button when a collapsed is opened or closed. However the icon part is updating but impossible to get the button text updated and I have no idea why.

My javascript level is very low and I'm simply using part of code I might find on SOF or anywhere else on inte.net.

Javascript

$('#more-properties').on('hidden.bs.collapse', function () {
  var icon = document.getElementById("icon-more-properties");
  icon.setAttribute('class', 'fas fa-angle-down pr-2');

  var btn = document.getElementById("btn-more-properties");
  btn.textContent('More properties');
});
$('#more-properties').on('shown.bs.collapse', function () {
  var icon = document.getElementById("icon-more-properties");
  icon.setAttribute('class', 'fas fa-angle-up pr-2');

  var btn = document.getElementById("btn-more-properties");
  btn.textContent('Less properties');
});

Bootstrap button

<div class="col-12 text-center" id="btn-div">
    <button class="btn btn-outline-dark shadow-none collapsed" id="btn-more-properties" type="button" data-toggle="collapse" data-target="#more-properties" style="border-radius: 0 !important;">
    <i id="icon-more-properties" class="fas fa-angle-down pr-2"></i>More properties</button>
</div>

Does anyone can tell me why it is not working? I can't find any similar issue on ite.net.

Thank you in advance for your help.

Answer 1

that textContent is not a function but a property, so instead of calling it you need to assign the value to it:

btn.textContent = 'Less properties';

Hope this helps