diff options
Diffstat (limited to '')
| -rw-r--r-- | site/content/docs/5.3/components/collapse.md (renamed from site/content/docs/5.2/components/collapse.md) | 18 |
1 files changed, 9 insertions, 9 deletions
diff --git a/site/content/docs/5.2/components/collapse.md b/site/content/docs/5.3/components/collapse.md index 21be901..21b9c3e 100644 --- a/site/content/docs/5.2/components/collapse.md +++ b/site/content/docs/5.3/components/collapse.md @@ -11,7 +11,7 @@ toc: true 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. {{< callout info >}} -{{< partial "callout-info-prefersreducedmotion.md" >}} +{{< partial "callouts/info-prefersreducedmotion.md" >}} {{< /callout >}} ## Example @@ -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 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"`). In both cases, the `data-bs-toggle="collapse"` is required. {{< example >}} <p> @@ -42,7 +42,7 @@ Generally, we recommend using a button with the `data-bs-target` attribute. Whil ## Horizontal -The collapse plugin also supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]({{< docsref "/utilities/sizing" >}}). +The collapse plugin supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]({{< docsref "/utilities/sizing" >}}). {{< callout info >}} Please note that while the example below has a `min-height` set to avoid excessive repaints in our docs, this is not explicitly required. **Only the `width` on the child element is required.** @@ -63,10 +63,10 @@ Please note that while the example below has a `min-height` set to avoid excessi </div> {{< /example >}} -## Multiple targets +## Multiple toggles and targets -A `<button>` or `<a>` can show and hide multiple elements by referencing them with a selector in its `href` or `data-bs-target` attribute. -Multiple `<button>` or `<a>` can show and hide an element if they each reference it with their `href` or `data-bs-target` attribute +A `<button>` or `<a>` element can show and hide multiple elements by referencing them with a selector in its `data-bs-target` or `href` attribute. +Conversely, multiple `<button>` or `<a>` elements can show and hide the same element if they each reference it with their `data-bs-target` or `href` attribute. {{< example >}} <p> @@ -100,9 +100,9 @@ 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 [ARIA Authoring Practices Guide accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) - you will need to include these yourself with custom JavaScript. -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="collapse-transition" file="scss/_variables.scss" >}} @@ -153,7 +153,7 @@ const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Co ### Methods {{< callout danger >}} -{{< partial "callout-danger-async-methods.md" >}} +{{< partial "callouts/danger-async-methods.md" >}} {{< /callout >}} Activates your content as a collapsible element. Accepts an optional options `object`. |