Enhancing Bootstrap 5 Collapse Feature
To start, I made some slight adjustments to your HTML code for better simplicity.
Collapse Toggle Option:
Here is how a collapse toggle can be implemented:
<div class="collapse-toggle" data-bs-toggle="collapse" data-bs-target="#item">
The use of attributes like data-bs-toggle and data-bs-target defines the functionality of the collapse toggle and its target selection for the corresponding content.
I also introduced a custom class collapse-toggle to easily identify toggle elements.
Working with Collapse Content:
This represents an example of collapsible content:
<div id="content" class="collapse-content collapse">
An id is assigned to establish a relationship between the toggle and this content. While attempting to target the sibling using :scope + *, an alternative approach was found which is elaborated in this stackoverflow post (link).
The presence of the collapse class indicates that this element should remain collapsed by default.
Additionally, a custom class collapse-content is set to specifically recognize content elements.
Automatic Descendant Collapsing Using JS - utilizing 'hidden.bs.collapse' event
To automatically collapse descendants when a parent collapses, I've utilized JavaScript with the hidden.bs.collapse event as outlined in the official documentation here (reference)
// Event listener added for each .collapse-content
$('.collapse-content').on('hidden.bs.collapse', function() {
// Find all descendents with .collapse-toggle and loop through them
$(this).find('.collapse-toggle').each((i, o) => {
// Perform hide action on the element following the toggle
//!A more specific criteria based on the .collapse-content class could be considered here
$(o).next().collapse('hide');
})
})
.collapse-toggle {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a0acb1a683f1edfaedf1">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbdb0b0abacabadbeaf9feaf1eff1ed">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395b56564d4a4d4b5849790c170b170a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div>
<!-- toggle 1 -->
<div class="collapse-toggle" data-bs-toggle="collapse" data-bs-target="#item">
<h3>Main Parent</h3>
</div>
<!-- content 1 -->
<div id="item" class="collapse-content collapse">
<!-- toggle 2 -->
<div class="collapse-toggle" data-bs-toggle="collapse" data-bs-target="#content">
<h3>Nested collapse item</h3>
</div>
<!-- content 2 -->
<div id="content" class="collapse-content collapse">
<p>Nested collapse contents</p>
</div>
</div>
</div>