Actualmente tengo algunos problemas para crear un elemento plegable en Bootstrap 5. Lo que quiero es que otras secciones se cierren cuando se hace clic en un elemento plegable diferente (similar a un acordeón). Lo quiero para que solo se pueda abrir una sección a la vez.

El elemento de colapso de Bootstraps está limpio; sin embargo, no puedo encontrar un ejemplo en su sitio de documentación donde otro contenido colapsa cuando uno se expande. Investigué un poco, y mucha gente ha estado diciendo que use el elemento principal de datos, pero desafortunadamente, no tengo suerte con eso.

Digamos que quiero poder hacer que esto suceda con uno de los ejemplos de Bootstrap:

 <p> <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-bs-target </button> </p> <div class="collapse" id="collapseExample"> <div class="card card-body"> Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div>

¿Cómo haría esto para asegurarme de que una sección abierta se cierre cuando se golpea un elemento de contracción diferente en la página? Este ejemplo de código es el primero en esta página: https://getbootstrap.com/docs/5.0/components/collapse/

Muchas gracias por su ayuda.