Bootstrap 5 radio button collapse-CodePudding

I have two radio buttons.

When I select one of the radios, All radios be hidden.

<!doctype html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
    <title>Hello, world!</title>
</head>
<body>
<div >
    <div >
        <label >Sector</label>
        <div>
            <div data-bs-toggle="collapse" data-bs-target="#private" aria-expanded="false" aria-controls="private">
                <div >
                    <input  type="radio" name="sector" id="private" value="0">
                    <label  for="private">Private</label>
                </div>
            </div>
            <div data-bs-toggle="collapse" data-bs-target="#governmental" aria-expanded="false" aria-controls="governmental">
                <div >
                    <input  type="radio" name="sector" id="governmental" value="1">
                    <label  for="governmental">Governmental</label>
                </div>
            </div>
        </div>
    </div>
    <div >
        <div >
            <div  id="private">
                <div >
                    You selected Private.
                </div>
            </div>
        </div>
        <div >
            <div  id="governmental">
                <div >
                    You selected Governmental.
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>

My problem is why two are opened together,

I want to open government and close private when I click on the government.

When I click on private, private opens and government close.

CodePudding user response：

Making the ids unique will make the toggles work as designed. The are all individually toggled every time you click the trigger. However, you can tie the toggled groups together using the parent option.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>


<div >
  <div >
    <label >Sector</label>
    <div>
      <div data-bs-toggle="collapse" data-bs-target="#private" aria-expanded="false" aria-controls="private">
        <div >
          <input  type="radio" name="sector" id="private_sector" value="0">
          <label  for="private_sector">Private</label>
        </div>
      </div>
      <div data-bs-toggle="collapse" data-bs-target="#governmental" aria-expanded="false" aria-controls="governmental">
        <div >
          <input  type="radio" name="sector" id="governmental_sector" value="1">
          <label  for="governmental_sector">Governmental</label>
        </div>
      </div>
    </div>
  </div>
  <div  id="sector_descriptions">
    <div >
      <div  id="private" data-bs-parent="#sector_descriptions">
        <div >
          You selected Private.
        </div>
      </div>
    </div>
    <div >
      <div  id="governmental" data-bs-parent="#sector_descriptions">
        <div >
          You selected Governmental.
        </div>
      </div>
    </div>
  </div>
</div>