Bootstrap 5 changing the text on a collapse button when clicked [closed]-CodePudding

I have looked everywhere for this solution and have found what to do for bootstrap 3 and 4 but not version 5.

I have the following code:

<div class="p-3">9 Members Online
  <a class="p-1 btn btn-info" data-bs-toggle="collapse" id="toggle" href="#hiddenContent" role="button" aria-expanded="false" aria-controls="collapseExample">Show</a>
</div>

<div class="collapse" id="hiddenContent">
  <div class="card card-body bg-transparent">
    Member 1. <br><br> Member 2.<br><br> Member 3.<br><br> Member 4.<br><br> Member 5.<br><br> Member 6.<br><br> Member 7.<br><br> Member 8.<br><br> Member 9.<br><br>
  </div>
</div>

I want the text "Show" to read "Hide" when clicked.

CodePudding user response：

Is this what you want to achieve? Just click on "Run Code Snippet" button and see if this works.

function toggleText() {
  var x = document.getElementById("toggle");
  if (x.innerHTML === "Show") {
    x.innerHTML = "Hide";
  } else {
    x.innerHTML = "Show";
  }
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<a onclick="toggleText()" class="p-1 btn btn-info" data-bs-toggle="collapse" id="toggle" href="#hiddenContent" role="button" aria-expanded="false" aria-controls="collapseExample">Show</a>

           <div class="collapse" id="hiddenContent">
               <div class="card card-body bg-transparent">
                       Member 1. <br><br>
                   Member 2.<br><br>
                   Member 3.<br><br>
                   Member 4.<br><br>
                   Member 5.<br><br>
                   Member 6.<br><br>
                   Member 7.<br><br>
                   Member 8.<br><br>
                   Member 9.<br><br>
               </div>
           </div>