Added documentation for using checkboxes to toggle collapse #39767
Conversation
|
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 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. |
|
as an aside, we probably don't want to suggest using an arbitrary non-focusable element, for accessibility reasons |
| @@ -8,7 +8,7 @@ toc: true | |||
|
|
|||
| ## How it works | |||
|
|
|||
| The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element. | |||
| The collapse JavaScript plugin is used to show and hide content. Buttons, anchors and many other elements can be used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element. | |||
There was a problem hiding this comment.
other interactive/focusable elements (while technically that's not required in the code, it'd be dangerous to suggest authors can just make anything a trigger, for accessibility reasons.
| @@ -22,7 +22,7 @@ Click the buttons below to show and hide another element via class changes: | |||
| - `.collapsing` is applied during transitions | |||
| - `.collapse.show` shows content | |||
|
|
|||
| Generally, we recommend using a `<button>` with the `data-bs-target` attribute. While not recommended from a semantic point of view, you can also use an `<a>` link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required. | |||
| Generally, we recommend using a `<button>` with the `data-bs-target` attribute. While not recommended from a semantic point of view, you can also use an `<a>` link with the `href` attribute (and a `role="button"`), an input with `type="checkbox"` or even a `<div>` tag. In all cases, the `data-bs-toggle="collapse"` is required. | |||
There was a problem hiding this comment.
again, just having a <div> will make it an inaccessible control, so probably best not to suggest that.
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
Checklist
npm run lint)Live previews
Related issues
Closes #39728