I'm having a problem getting the Bootstrap Buttons to properly expand/collapse. I have two Forms on the page but when I click "Show All" the comments within both Forms are shown.
Can anyone tell me what I'm doing wrong or show me what I need to change?
Solution: Clicking on "Show All" within one Form only shows all the comments for that Form.
<html>
<header>
</header>
<body>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/cupertino/jquery-ui.min.css" integrity="sha512-9SEz2+WNpf9iyTy855xgweUvhu8Rz9BnU4d/MBFSFSh4kaAFeCA+/Otj5/NaB9PiMpjO1ajRNbplQTXa182X9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<p> </p>
<form id="messageCodeForm-1" class="row g-3 needs-validation was-validated" novalidate>
<div class="row">
<div class="col-6">
<fieldset class="border p-2">
<legend class="float-none w-auto">Form 1 Comments</legend>
<div class="row" style="margin-bottom: 10px;">
<div class="col">
<p class="d-inline-flex gap-1">
<button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target="#comment-01-1" aria-expanded="false" aria-controls="collapseExample">
Comment 1
</button>
<button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="comment-01-1 comment-02-1">Show All</button>
</p>
<div id="comment-01-1" class="collapse multi-collapse">
<div class="card card-body">
Comment 1
</div>
</div>
</div>
</div>
<div class="row" style="margin-bottom: 10px;">
<div class="col">
<p class="d-inline-flex gap-1">
<button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target="#comment-02-1" aria-expanded="false" aria-controls="comment-02-1">
Comment 2
</button>
</p>
<div id="comment-02-1" class="collapse multi-collapse">
<div class="card card-body">
Comment 2
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</form>
<p> </p>
<p> </p>
<form id="messageCodeForm-2" class="row g-3 needs-validation was-validated" novalidate>
<div class="row">
<div class="col-6">
<fieldset class="border p-2">
<legend class="float-none w-auto">Form 2 Comments</legend>
<div class="row" style="margin-bottom: 10px;">
<div class="col">
<p class="d-inline-flex gap-1">
<button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target="#comment-01-2" aria-expanded="false" aria-controls="collapseExample">
Comment 1
</button>
<button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="comment-01-2 comment-02-2">Show All</button>
</p>
<div id="comment-01-2" class="collapse multi-collapse">
<div class="card card-body">
Comment 1
</div>
</div>
</div>
</div>
<div class="row" style="margin-bottom: 10px;">
<div class="col">
<p class="d-inline-flex gap-1">
<button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target="#comment-02-2" aria-expanded="false" aria-controls="comment-02-2">
Comment 2
</button>
</p>
<div id="comment-02-2" class="collapse multi-collapse">
<div class="card card-body">
Comment 2
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</form>
</body>
</html>
Collapse Targets were wrong in your code and i have Adjusted data-bs-target as well.Here is the working code:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/cupertino/jquery-ui.min.css" integrity="sha512-9SEz2+WNpf9iyTy855xgweUvhu8Rz9BnU4d/MBFSFSh4kaAFeCA+/Otj5/NaB9PiMpjO1ajRNbplQTXa182X9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body>
<p> </p>
<form id="messageCodeForm-1" class="row g-3 needs-validation was-validated" novalidate>
<div class="row">
<div class="col-6">
<fieldset class="border p-2">
<legend class="float-none w-auto">Form 1 Comments</legend>
<div class="row mb-3">
<div class="col">
<p class="d-inline-flex gap-1">
<button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target="#comment-01-1" aria-expanded="false" aria-controls="comment-01-1">
Comment 1
</button>
<button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target=".multi-collapse-form1" aria-expanded="false">
Show All
</button>
</p>
<div id="comment-01-1" class="collapse multi-collapse-form1">
<div class="card card-body">
Comment 1
</div>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<p class="d-inline-flex gap-1">
<button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target="#comment-02-1" aria-expanded="false" aria-controls="comment-02-1">
Comment 2
</button>
</p>
<div id="comment-02-1" class="collapse multi-collapse-form1">
<div class="card card-body">
Comment 2
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</form>
<p> </p><p> </p>
<form id="messageCodeForm-2" class="row g-3 needs-validation was-validated" novalidate>
<div class="row">
<div class="col-6">
<fieldset class="border p-2">
<legend class="float-none w-auto">Form 2 Comments</legend>
<div class="row mb-3">
<div class="col">
<p class="d-inline-flex gap-1">
<button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target="#comment-01-2" aria-expanded="false" aria-controls="comment-01-2">
Comment 1
</button>
<button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target=".multi-collapse-form2" aria-expanded="false">
Show All
</button>
</p>
<div id="comment-01-2" class="collapse multi-collapse-form2">
<div class="card card-body">
Comment 1
</div>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<p class="d-inline-flex gap-1">
<button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target="#comment-02-2" aria-expanded="false" aria-controls="comment-02-2">
Comment 2
</button>
</p>
<div id="comment-02-2" class="collapse multi-collapse-form2">
<div class="card card-body">
Comment 2
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</form>
</body>
</html>