Simple article with table of contents

April 3, 2021
by Jeremy Caudle
code

It’s always nice to see a table of contents on a tutorial or long article. They’re even better when you can click on a link within the table to jump to a section within the article or tutorial. Some website even highlight the current section while you’re reading. Mine isn’t that fancy, but I got to work more with position:sticky and try out a few other ideas today. I’ll tackle the fancier version some other time.

Section One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eros lacus, placerat non lectus sit amet, dictum facilisis neque. Aenean ligula risus, gravida eu feugiat ac, fermentum vitae sapien. Vivamus efficitur volutpat eros in sagittis. Cras id lectus purus. Donec erat magna, molestie id velit at, maximus viverra urna. Morbi vel ullamcorper eros, sed porttitor nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris libero turpis, laoreet eget faucibus in, laoreet eu enim.

Section Two

Section Three

Section Four

Section Five

Cras id lectus purus. Donec erat magna, molestie id velit at, maximus viverra urna. Morbi vel ullamcorper eros, sed porttitor nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris libero turpis, laoreet eget faucibus in, laoreet eu enim.

Section Six

View the code:

HTML and JS

<div class="code-block">
            <article>
                <h2 id="one">Section One</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eros lacus, placerat non lectus sit amet, dictum facilisis neque. Aenean ligula risus, gravida eu feugiat ac, fermentum vitae sapien. Vivamus efficitur volutpat eros in sagittis. Cras id lectus purus. Donec erat magna, molestie id velit at, maximus viverra urna. Morbi vel ullamcorper eros, sed porttitor nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris libero turpis, laoreet eget faucibus in, laoreet eu enim.</p>
                <h2 id="two">Section Two</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eros lacus, placerat non lectus sit amet, dictum facilisis neque. Aenean ligula risus, gravida eu feugiat ac, fermentum vitae sapien. Vivamus efficitur volutpat eros in sagittis. Cras id lectus purus. Donec erat magna, molestie id velit at, maximus viverra urna. Morbi vel ullamcorper eros, sed porttitor nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris libero turpis, laoreet eget faucibus in, laoreet eu enim.</p>
                <h2 id="three">Section Three</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eros lacus, placerat non lectus sit amet, dictum facilisis neque. Aenean ligula risus, gravida eu feugiat ac, fermentum vitae sapien. Vivamus efficitur volutpat eros in sagittis. Cras id lectus purus. Donec erat magna, molestie id velit at, maximus viverra urna. Morbi vel ullamcorper eros, sed porttitor nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris libero turpis, laoreet eget faucibus in, laoreet eu enim.</p>
                <h2 id="four">Section Four</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eros lacus, placerat non lectus sit amet, dictum facilisis neque. Aenean ligula risus, gravida eu feugiat ac, fermentum vitae sapien. Vivamus efficitur volutpat eros in sagittis. Cras id lectus purus. Donec erat magna, molestie id velit at, maximus viverra urna. Morbi vel ullamcorper eros, sed porttitor nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris libero turpis, laoreet eget faucibus in, laoreet eu enim.</p>
                <h2 id="five">Section Five</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eros lacus, placerat non lectus sit amet, dictum facilisis neque. Aenean ligula risus, gravida eu feugiat ac, fermentum vitae sapien. Vivamus efficitur volutpat eros in sagittis. Cras id lectus purus. Donec erat magna, molestie id velit at, maximus viverra urna. Morbi vel ullamcorper eros, sed porttitor nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris libero turpis, laoreet eget faucibus in, laoreet eu enim.</p>
                <p>Cras id lectus purus. Donec erat magna, molestie id velit at, maximus viverra urna. Morbi vel ullamcorper eros, sed porttitor nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris libero turpis, laoreet eget faucibus in, laoreet eu enim.</p>
                <h2 id="six">Section Six</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eros lacus, placerat non lectus sit amet, dictum facilisis neque. Aenean ligula risus, gravida eu feugiat ac, fermentum vitae sapien. Vivamus efficitur volutpat eros in sagittis. Cras id lectus purus. Donec erat magna, molestie id velit at, maximus viverra urna. Morbi vel ullamcorper eros, sed porttitor nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris libero turpis, laoreet eget faucibus in, laoreet eu enim.</p>
                <p>Cras id lectus purus. Donec erat magna, molestie id velit at, maximus viverra urna. Morbi vel ullamcorper eros, sed porttitor nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris libero turpis, laoreet eget faucibus in, laoreet eu enim.</p>
            </article>
            <aside>
                <h3>Table of Contents</h3>
                <ul>
                    <li><a href="#one">Section One</a></li>
                    <li><a href="#two">Section Two</a></li>
                    <li><a href="#three">Section Three</a></li>
                    <li><a href="#four">Section Four</a></li>
                    <li><a href="#five">Section Five</a></li>
                    <li><a href="#six">Section Six</a></li>
                </ul>
            </aside>
            <footer>
                <p>This is text meant for the footer of the page.</p>
            </footer>
        </div>

CSS

.code-block {
                width: clamp(16em, 75vw, 60em);
                margin: 1rem auto;
                min-height: 30vh;
                font-size: 20px;
                color: #666;
                font-family: Helvetica, Arial, sans-serif;
            }

            .code-block aside {
                border: solid 1px #eee;
                padding: 1rem;
            }

            .code-block h2 {
                color:cadetblue;
                position: relative;
            }

            .code-block h2:target::before {
                content: "\01F4CC";
                font-size: .8em;
                position: absolute;
                left: -2rem;
            }

            .code-block footer {
                padding: 1rem;
                background-color: cadetblue;
                color: white;
                text-align: center;
            }

            @supports (display: grid) {
                .code-block {
                    display: grid;
                    grid-auto-flow: row;
                }

                @media (min-width: 50em) {
                    .code-block {
                        grid-template-columns: 3fr 2fr;
                        grid-row: auto;
                        gap: 1rem;
                    }
                    .code-block aside {
                        position: sticky;
                        top: 10rem;
                        height: 20rem;
                    }
                    .code-block footer {
                        grid-column: 1 / 4;
                    }
                }
            }