Some blog posts need to post code listings with lots of code. Long code listings often make it easy for your readers to lose the plot. You can provide your users a little relief from walls of code using an Eleventy paired shortcode.

The desired output is shown below. It uses HTML's details and summary tags to provide intrinsic expanding and collapsing (no JavaScript needed).

The blank lines before and after the code fences are very important. The shortcode must provide the blank lines around the content so the Markdown processor (running after Nunjucks or whatever template engine you're using) treats the code fence as a block rather than literal text inside an HTML element.

... other markdown

<details class="code-display"> 
<summary>Creating a FlexSearch document index</summary>
<div> 

```
index = new Document({
    document: {
        id: "id",
        store: ["id", "title", "url", "tags", "folder", "description"],
        //store: true,
        index: ["title", "url", "content", "tags", "description"],
        tag: "folder",
    },
    tokenize: "forward",
});
```

</div>
</details>

... other markdown

Define the paired shortcode in .eleventy.js:

eleventyConfig.addPairedShortcode("hideContent", function(content, title) {
  return `<details name="code-reveal" class="code-display">\n<summary>${title}</summary>\n<div>\n\n${content}\n\n</div>\n</details>`;
});

The paired shortcode above includes name="code-reveal" for the details tag to provide accordion behavior where opening one code chunk automatically closes the others. Remove that name assignment if you don't want the accordion behavior.

Then in any .md file (specifying the code fences and the language as usual), wrap your code fence with the paired shortcode:

{% hideContent "Creating a FlexSearch document index" %}
```js
index = new Document({
    document: {
        id: "id",
        ...
    }
});

... lots of other code to display...

```
{% endhideContent %}

See the collapsible code in action below:

index = new Document({
    document: {
        id: "id",
        ...
    }
});

These examples use the accordion behavior. Only one of them is expanded.

See the other collapsible code in action below:

index = new Document({
    document: {
        id: "id",
        ...
    }
});

CSS for the code display

The paired shortcode provided above specifies a CSS class of code-display. That CSS is shown below. Use it or create your own.

:root {
  interpolate-size: allow-keywords;
}

details.code-display {
    font-size: 1.2rem;
    margin-block-end: 1rem;
}

details.code-display div {
    margin-block-start: 1rem;
} 

details.code-display::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.3s ease, content-visibility 0.3s ease allow-discrete;
}

details.code-display[open]::details-content {
  height: auto;
}