Support for the HTML `details` and `summary` tags

Ideas
1

The following code works very well in the Custom Code element, but it cannot be converted to standard code.
Support for these tags would be a plus for BSS users.
And why not create an advanced component that would allow users to configure styles?

<details class="mb-3 border rounded border-primary">  
    <summary class="p-3 fs-4">Question 1</summary>
    <div class="p-3">
        <p>Answer 1</p>
        <p>Ut eros vivamus, torquent vehicula vel quis. Ac ultricies ullamcorper quis, donec tempor aliquam. Aliquet euismod quis, curabitur feugiat etiam cursus bibendum quis a. Accumsan.</p>
    </div>
</details>

<details class="mb-3 border rounded border-primary">  
    <summary class="p-3 fs-4">Question 2</summary>
    <div class="p-3">
        <p>Answer 2</p>
        <p>Ut eros vivamus, torquent vehicula vel quis. Ac ultricies ullamcorper quis, donec tempor aliquam. Aliquet euismod quis, curabitur feugiat etiam cursus bibendum quis a. Accumsan.</p>
    </div>
</details>
2

I’m using an older version of BSS, but I’m curious if your version supports this CSS fully (which animates the

html {
  interpolate-size: allow-keywords;
}

details::details-content {
  opacity: 0;
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease, opacity 0.3s ease, content-visibility 0.3s allow-discrete;
}

details[open]::details-content {
  opacity: 1;
  block-size: auto;
}

It seems like allow-discreet and interpolate-size are not supported in BSS (even though they WORK FINE when you preview your code with my CSS in a browser.)

3

Thank you for your reply.
The CSS code you provided does not change the BSS interface in any way.
However, when the page is displayed, it animates the scrolling.
I would like to see support added for HTML tags that are unknown to BSS.
@martin

image
image360×519 30.5 KB

4

the css above is experimental

1 Like