Title:

Css_toc_details

Author:

Raxen

Date:

December 24, 2024

TABLE OF CONTENTS

TRYING TO CREATE ONLY CSS TABLE OF CONTENTS WITH ANIMATION

CSS DETAILS ANIMATION

I was trying to find a way to have my Table of contents have a smooth animation for opening and closing. NO JAVASCRIPT.

HTML

1
2
3
4

<details>
    <summary>...</summary>
    <div class="content">...</div>
</details>

CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* animate toc opening and closing */
details::details-content{
    block-size: 0;
    transition-property: block-size, content-visibility;
    transition-duration: 250ms;
    transition-behavior: allow-discrete;
}
details[open]::details-content{
    block-size: 50rem;
    block-size: auto;
    block-size: calc-size(auto);
}

BAD NEWS

unfortunately the calc-size() is not yet supported by firefox. stated here No idea what to do to have feature parity as of now.