diff options
Diffstat (limited to 'site/content/docs/5.0/components/collapse.md')
| -rw-r--r-- | site/content/docs/5.0/components/collapse.md | 20 |
1 files changed, 16 insertions, 4 deletions
diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md index 0c23133b6..fe26918c1 100644 --- a/site/content/docs/5.0/components/collapse.md +++ b/site/content/docs/5.0/components/collapse.md @@ -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 -You can use a link with the `href` attribute, or a button with the `data-bs-target` attribute. 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 a link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required. {{< example >}} <p> @@ -35,7 +35,7 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ </p> <div class="collapse" id="collapseExample"> <div class="card card-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. + Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> {{< /example >}} @@ -55,14 +55,14 @@ Multiple `<button>` or `<a>` can show and hide an element if they each reference <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample1"> <div class="card card-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. + Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample2"> <div class="card card-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. + Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> </div> @@ -77,6 +77,18 @@ If your control element is targeting a single collapsible element – i.e. the ` Note that Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [WAI-ARIA Authoring Practices 1.1 accordion pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) - you will need to include these yourself with custom JavaScript. +## Sass + +### Variables + +{{< scss-docs name="collapse-transition" file="scss/_variables.scss" >}} + +### Classes + +Collapse transition classes can be found in `scss/_transitions.scss` as these are shared across multiple components (collapse and accordion). + +{{< scss-docs name="collapse-classes" file="scss/_transitions.scss" >}} + ## Usage The collapse plugin utilizes a few classes to handle the heavy lifting: |