Как сделать так чтобы collapse открывался один bootstrap?

Question

pro100blich @pro100blich

Как сделать так чтобы collapse открывался один bootstrap?

Подскажите как сделать чтобы они открывались только по одному. Смотрел в документации, там есть решение, но тогда у меня все слетает и получается не то что я хотел.

<!doctype html>
<html lang="ru">
  <head>
    <!-- Обязательные метатеги -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <title>Привет мир!</title>
  </head>
  <body class="bg-light">
    <nav class="navbar navbar-expand-lg  navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Главаня</a>
        <a class="nav-link" href="#">База пациантов</a>
        <a class="nav-link" href="#">Pricing</a>
      </div>
    </div>
  </div>
</nav>
   
   <div class="container-fluid mt-5">
   
   <div class="row">
   <div class="col-md-auto " >
   <input class="form-control" type="text" placeholder="Поиск" id="search-text" onkeyup="tableSearch()">
   <div class="accordion" id="accordionExample">
  <div class="accordion-item">
<table class="table table-striped" id="info-table">
   
    <thead>
        <tr>
           <th>ФИО</th>                            
            <th>Дата рождения</th>                            
            <th>Диагноз</th>
            <th>Дата поступление</th>
            <th>Посмтотреть</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Моисеев Альфред Якунович</td>
            <td>01.05.1999</td>
            <td>Синдром Туретта</td>
            <td>17.09.2020</td>
            <td><a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="true" aria-controls="collapseExample">
    Ссылка с href
  </a></td>
        </tr>
        <tr>
            <td>Лаврентьев Назарий Георгьевич</td>
            <td>12.09.2004</td>
            <td>Обсессия</td>
            <td>23.10.2020</td>
            <td><a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="true" aria-controls="collapseExample1">
    Ссылка с href
  </a></td>
        </tr>
        <tr>
            <td>Третьяков Адольф Аркадьевич</td>
            <td>31.01.2000</td>
            <td>Психические расстройства</td>
            <td>12.11.2020</td>
            <td><a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="true" aria-controls="collapseExample2">
    Ссылка с href
  </a></td>
        </tr>
        <tr>
            <td>Воронов Иван Агафонович</td>
            <td>04.12.2000</td>
            <td>Шизофрения</td>
            <td>15.12.2020</td>
            <td><a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="true" aria-controls="collapseExample3">
    Ссылка с href
  </a></td>
        </tr>
        <tr>
            <td>Исаев Парамон Лукьевич</td>
            <td>31.10.1995</td>
            <td>Психические расстройства</td>
            <td>02.03.2021</td>
            <td><a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample4" role="button" aria-expanded="true" aria-controls="collapseExample4">
    Ссылка с href
  </a></td>
        </tr>
    </tbody>
</table> 
 </div> 
 
     <div class="col col-lg-2">
     
     
     <div class="collapse" id="collapseExample" >
  <div class="card card-body">
    Некоторый заполнитель для компонента сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
  </div>
</div>
   <div class="collapse" id="collapseExample1">
  <div class="card card-body">
222222222222222222222222222
  </div>
</div>
  <div class="collapse" id="collapseExample2">
  <div class="card card-body">
33333333333333333333333333333
  </div>
</div>
  <div class="collapse" id="collapseExample3">
  <div class="card card-body">
4444444444444
  </div>
</div>
  <div class="collapse" id="collapseExample4">
  <div class="card card-body">
 55555555555555555555555555555
  </div>
</div>
   
   
   
   
    </div>    
  </div> 
   
   
       </div></div>
   
   
   
   
 </div>  
   
      
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    <!-- Дополнительный JavaScript; выберите один из двух! -->

    <!-- Вариант 1: Bootstrap в связке с Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

    <!-- Вариант 2: Bootstrap JS отдельно от Popper
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>

    -->
  </body>
</html>