我有两个可折叠的开关按钮，每一个按钮都会在我的表单中打开/关闭一个复选框。在复选框上方我有一个小段落，我希望只有当两个复选框都隐藏（或主开关关闭）时，这个段落才隐藏（碰撞），我不知道如何使它工作。我正在用Bootstrap开发这个前端。

<label class="switch mt-2">
<input class="form-check-input" type="checkbox" role="switch" id="ds-activate" data-bs-toggle='collapse' data-bs-target='#dsForm' aria-expanded="false" aria-controls="dsForm" checked>
<div class="slider round">
</div>
</label>

<label class="switch mt-2">
<input class="fo rm-check-input" type="checkbox" role="switch" id="email-activate" data-bs-toggle='collapse' data-bs-target='#emailForm' aria-expanded="false">
<div class="slider round">
</div>
</label>

<div id="hideWhenBothSwitchOff" aria-expanded="false" class="collapse show">
  <label class="form-label">MORE OPTIONSs</label>
  <p>Explanation of the next options.</p>
</div>

<div id="dsForm" aria-expanded="false" class="collapse show">
  <div class="form-check mt-2 mb-2">
    <input class="form-check-input" type="checkbox" value="" id="all-documents">
    <label class="form-check-label" for="allDocuments">
      Checkbox 1 label
    </label>
  </div>
</div>

<div id="emailForm" aria-expanded="false" class="collapse">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="all-emails">
    <label class="form-check-label" for="allEmails">
      Checkbox 2 label
    </label>
  </div>
</div>