Writing the previous blog post I learnt something new, that I want to share here. There are two code snippets, which illustrate the usefulness of having ASCII art illustrations commenting the code. The idea was to let the reader see one example after another, so I needed something like a collapsible element.
Having learnt about them before, but not using them, I totally forgot about the <details> and <summary> tags.
<details> <summary>Click to expand</summary> Today I learnt about the details tag and the summary tag! Yay!</details>The result looks like this:
Click to expand
Today I learnt about the details tag and the summary tag! Yay!No javascript. Plain HTML. I like it. And now that I had a chance to rediscover and use it, I hope I won’t forget about it again.
Example Markdown with plain HTML
This blog is a static website, and its posts are written in markdown. Markdown does not offer collapsible elements, but it is possible to directly insert html-elements instead, too. The following code snippet is what the markdown for the text above looks like:
```html<details> <summary>Click to expand</summary> Today I learnt about the details tag and the summary tag! Yay!</details>```
The result looks like this:
---
<details> <summary>Click to expand</summary> Today I learnt about the details tag and the summary tag! Yay!</details>
---Update from 23.04.2023
With the change from Hexo to Astro as the building framework for my site, I can use *.mdx and insert React components.
One example is the slider component used in the post (Self-hosted) Pizzateig Grundrezept.