Collapsible Markdown on GitHub Markdown and Beacons AI

Welcome to Technically Speaking, a series that will serve as the hub for my latest technical escapades. The focus here is strictly technical—covering everything from code snippets to full-blown projects. Consider this my daily commitment to better coding habits and creative building!

Today, let's dive into how to create collapsible markdown sections on GitHub and Beacons AI. The notion struck me after stumbling upon a gist by pierrejoubert73. Here's what sparked the idea:

How to add a collapsible section in markdown

1. Example

Click me

Heading

1. Foo
2. Bar
   • Baz
   • Qux

Some Javascript

function logSomething(something) {
  console.log('Something', something);
}

2. Code/Markdown

<details>
  <summary>Click me</summary>
  
  ### Heading
  1. Foo
  2. Bar
     * Baz
     * Qux

  ### Some Javascript
  ```js
  function logSomething(something) {
    console.log('Something', something);
  }
  ```
</details>

3. Tips & Tricks

3.1 Expand by Default

To have a collapsible section expanded by default, simply include the 'open' attribute within the <details> tag:

Hello

World!

<details open>
  <summary>Hello</summary>
  World!
</details>

3.2 Customize Clickable Text

You can modify the appearance of the clickable text by adding styling inside the <summary> tags:

Wow, so fancy

WOW, SO BOLD

<details>
  <summary><i>Wow, so fancy</i></summary>
  <b>WOW, SO BOLD</b>
</details>

3.3 Nested Collapsible Sections

NB: When including headings within collapsible sections, remember to add a new line after the <summary> tag.

Section A

Section A.B

Section A.B.C

Section A.B.C.D

Done!

<details>
<summary>Section A</summary>
<details>
<summary>Section A.B</summary>
<details>
<summary>Section A.B.C</summary>
<details>
<summary>Section A.B.C.D</summary>
  Done!
</details>
</details>
</details>
</details>

Troubleshooting

• If certain markdown or styling, such as # My Title, fails to render in the collapsible section, try adding a line break after the </summary> tag.
• If your section fails to render, it might be malformed. Consider copying the functional examples provided here and building from there!

view raw markdown-details-collapsible.md hosted with ❤ by GitHub

---

Beacons AI: The About Me Section

My first playground was my Beacons AI 'About Me' section, where markdown formatting is welcomed. Check out the markdown code I used:

<center>
<details>
<summary>
👉👈
</summary>

### Oh, hello there! 👋

|  | I'm a / an |
| :--- | :---: |
| Programmer | ✔ |
| AI Tech Writer | ✔ |
| Data Practitioner | ✔ |
| Statistics & Math Addict | ✔ |
| Open Source Contributor | ✔ |
| Quantum Computing Enthusiast | ✔ |
</details>
</center>

Curious to see it in action? The code renders as shown below. Feel free to explore and experiment on my Beacons AI page.

A word of caution: this could impact your SEO preview, as evidenced by this Telegram snapshot.

GitHub: README Section

Next, I integrated collapsible markdown into my GitHub README. Here's a snippet:

<details>
<summary>
With <strong>me</strong>
</summary>
<center>

|  | I'm a / an |
| :--- | :---: |
| Programmer | ✔ |
| AI Tech Writer | ✔ |
| Data Practitioner | ✔ |
| Statistics & Math Addict | ✔ |
| Open Source Contributor | ✔ |
| Quantum Computing Enthusiast | ✔ |
</center>
</details>

<details>
<summary>
I <strong>code</strong> in the dark of my room 👨‍💻
</summary>
<div align="right">

And I predict my data, **forecasting** from afar (oh)  
"**Unittest**," but it's not just a few  
**Data analysis** keeps me on cue
</div>
</details>

<details>
<summary>
And I <strong>study now</strong>, the current state 💻
</summary>
<div align="right">

Of **Rust** and **Julia** to seal my fate (oh)  
And in **Python**, I find my worth  
"**SQL**", ain't that the geekiest you ever heard?  
I write those, grinding like a coder
</div>
</details>

It's worth noting that the center tag doesn't yield the same results on GitHub as it does on Beacons AI. To see how it renders, visit my GitHub profile.

And that wraps up today's episode of Technically Speaking. Collapsible markdown is more than just a neat trick; it's a way to make your pages more interactive and engaging. So go ahead, give it a whirl, and let me know how it works for you!