How to collapse all div and dynamically change the button-CodePudding

I am trying to write a page with collapse function, but I can only achieve single div collapse by boostrap. How to write a function to collapse all div and change the button content like "Collapse all-" to "Expand all "?

https://codesandbox.io/s/elated-poincare-skugzl

          <div >
            <a  data-bs-toggle="collapse" href="#question">Collapse All-</a>
          </div>
           <a data-bs-toggle="collapse" href="#q11">
            <div >
              <div >
                <span >1. What should I do ?</span>
                <span > </span>
                <div  id="q11">
                  <p >
                    Please help.
                  </p>
                </div>
              </div>
            </div>
            </a>
          <a data-bs-toggle="collapse" href="#q12">
          <div >
            <div >
              <span >2. What should I do?</span>
              <span > </span>
              <div  id="q12">
                <p >
                  please help
                </p>
              </div>
            </div>
          </div>
          </a>

CodePudding user response：

Toggle the show class:

function changeVisibility(){
   document.querySelectorAll(".collapse").forEach(div => div.classList.toggle("show"))
}

Code