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>