Skip to content

Commit

Permalink
add toggle for visibility collapse
Browse files Browse the repository at this point in the history
  • Loading branch information
estelle authored Dec 18, 2024
1 parent 1056e41 commit df5022d
Showing 1 changed file with 10 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -302,6 +302,10 @@ The following example shows this behavior. The third flex item is collapsed, so
> [!NOTE]
> Use Firefox for the example below as other common browsers treat `collapse` as `hidden`.
```html hidden live-sample___wrapped-visibility-collapse
<p><label><input type="checkbox"> Toggle <code>visibility</code> value</label></p>
```

```html live-sample___wrapped-visibility-collapse
<div class="box">
<div>One</div>
Expand Down Expand Up @@ -337,8 +341,13 @@ The following example shows this behavior. The third flex item is collapsed, so
visibility: collapse;
}
```
```css hidden live-sample___wrapped-visibility-collapse
p:has(:checked) + div .collapse {
visibility: visible;
}
```

{{EmbedLiveSample("wrapped-visibility-collapse")}}
{{EmbedLiveSample("wrapped-visibility-collapse", "", "400")}}

If this causes a problem for your layout it may require a rethinking of the structure, for example putting each row into a separate flex container in order that they can't shift rows.

Expand Down

0 comments on commit df5022d

Please sign in to comment.