Web Design—Adding Text Previews To HTML Details Disclosure Elements

Looking around the site, you might get the hint that I’m a big fan of <details class=”detailsClassName”><summary>blah blah blah</summary> even more blah blah blah</details> disclosure elements.

For those unfamiliar, that’s this:

Here’s a title of a section

Here’s where a bunch of information goes. Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah

It’s true. I am.

But, I have one issue with them: sometimes I feel like they’re a little nonintuitive. It’s easy to miss them in certain circumstances, or maybe even not to realize they’re clickable.

So, I came up with a way to make them show a preview of the contents.
First, you need the following CSS:

details.detailsClassName:not([open]) > summary > .detailspreview { display: block;overflow-x: clip;font-size: .8em;line-height: 1.2em;text-overflow: ellipsis;white-space: nowrap; }

details.detailsClassName[open] > summary > .detailspreview {display: none;}

Then, you simply add a <span class=”detailspreview”>preview text here</span> to every summary section, as follows:

details class="detailsClassName"><summary>blah blah blah<span class="detailspreview">even more blah blah blah... </span></summary>even more blah blah blah</details>

And that gives you this:

Here’s a title of a section

Here’s where a bunch of information goes. Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah

“But, wait!”, I hear you say. “I’ve already got 11,732 <details> tags on my website! I can’t go through and add the preview span manually to all of them! Isn’t there some way to display that preview automatically?”

Don’t worry, I’ve got you covered.

Instead of manually adding the preview span on each details block, you can just enter the details block normally, like the example I gave at top. Then, in the footer where it will run after the whole page loads, add the following script. :


<script>
    document.querySelectorAll('details.detailsClassName').forEach(details => {
    const paragraphs = details.querySelectorAll('p');
    if (paragraphs.length === 0) return;

    let combinedText = '';
    let i = 0;

    while (i < paragraphs.length && combinedText.length < 50) {
        combinedText += (combinedText ? ' ' : '') + (paragraphs[i].textContent || '');
        i++;
    }

    if (combinedText.trim()) {
        const preview = document.createElement('span');
        preview.className = 'detailspreview';
        preview.textContent = combinedText.substring(0,250) + '...';
        details.querySelector('summary').appendChild(preview);
    }
});
</script>

That will take up to the first 250 characters of text content hidden in the details, and display them in a <span class=”detailspreview”> span automatically on the fly, without you having to do anything to add it. In fact, that’s how it’s done all over this site, where you see the details disclosure blocks with previews.

You just have to always make sure either your <details> blocks have an identiable classname or some other selector, just in case you ever have <details> blocks you don’t want to add previews to… like the ones in the right-hand navigation column on this site.

And that’s it! Enjoy!