Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added documentation for using checkboxes to toggle collapse #39767

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Added documentation for using checkboxes to toggle collapse #39767

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
87588d3
added documentation for using checkboxes to toggle collapse
TommasoAllegretti Mar 9, 2024
cec06bf
Merge branch 'main' into checkbox-collapse
patrickhlauke Mar 13, 2024
c55a6ab
Fixed collapse documentation
TommasoAllegretti May 2, 2024
83b3c63
Merge branch 'main' into checkbox-collapse
patrickhlauke May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions site/content/docs/5.3/components/collapse.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


{{< callout info >}}
{{< partial "callouts/info-prefersreducedmotion.md" >}}
Expand All @@ -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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

again, just having a <div> will make it an inaccessible control, so probably best not to suggest that.


{{< example >}}
<p class="d-inline-flex gap-1">
Expand Down