Is there a way to hide a paragraph only when two collapsible switch buttons are turned off in my Bootstrap frontend form? I have two checkboxes with corresponding switches, and the paragraph should only be hidden when both switches are off, but I'm not sure how to achieve this.
<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>