twbs
Added documentation for using checkboxes to toggle collapse
Description
The Collapse documentation only talks about buttons and elements as toggles. However, using checkboxes also works fine. Therefore, it should be pointed out in the docs that you can also use checkboxes as collapse toggles.
Motivation & Context
As requested in issue #39728
Type of changes
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [x] Refactoring (non-breaking change)
- [ ] Breaking change (fix or feature that would change existing functionality)
Checklist
- [x] I have read the contributing guidelines
- [x] My code follows the code style of the project (using
npm run lint) - [x] My change introduces changes to the documentation
- [x] I have updated the documentation accordingly
- [ ] I have added tests to cover my changes
- [ ] All new and existing tests passed
Live previews
Related issues
Closes #39728
I'd say that we shouldn't mention checkboxes specifically but rather make it understandable that collapse can be used with basically everything. For example, you can also use it with basic HTML elements such as <code>, <div>, etc.
<code data-bs-toggle="collapse" data-bs-target="#collapseExample">Test from code</code>
<div data-bs-toggle="collapse" data-bs-target="#collapseExample" class="w-100 h-100 bg-warning">Test from div</div>
<div class="collapse" id="collapseExample" style="">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
Maybe we can make it clearer in "How it works" that it works with everything and that buttons and links are used on this page because they would be the most common elements as triggers 🤷
Agreed, we are better off documenting the above. Let alone that the checkbox in this PR is hard to notice next to the buttons.
Sorry for the delayed response, I followed your feedback and changed the documentation accordingly. Please let me know if the documentation is now clear enough in explaining the possibility of using various different elements to toggle a collapse.
as an aside, we probably don't want to suggest using an arbitrary non-focusable element, for accessibility reasons
Agreed on the advice of only encouraging semantic elements for this kind of thing. Sure a checkbox can be used, and any other element, but I don't think that needs stating here. We encourage one thing—we don't need to encourage everything IMO. Anyone on the maintainer team though that feels strongly is free to overrule though :).
Are you sure? A checkbox looks much better design for deciding whether some elements in a list should be shown or not.
