Skip to content

Commit

Permalink
Tweak collapse prose
Browse files Browse the repository at this point in the history
  • Loading branch information
patrickhlauke authored and GeoSot committed Nov 12, 2022
1 parent c3db861 commit 661991b
Showing 1 changed file with 5 additions and 5 deletions.
10 changes: 5 additions & 5 deletions site/content/docs/5.2/components/collapse.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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.**
Expand All @@ -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>
Expand Down

0 comments on commit 661991b

Please sign in to comment.