Ngày nào đến vp ngồi vào máy tính cũng tự hỏi “hôm nay làm điếu jì nhẻ?". Việc muốn làm, nếu gom vào một chỗ, thì cái bãi rác Nam Sơn cũng fải gọi bằng cụ. Toàn việc ngại làm, thành ra cái đống ý càng ngày càng chồng chất.

Homnay quyết định đánh vật với toggle list¹.

Hinhzung trong đầu 2 jaifap, cái nào cũng cần js.

• Một là thêm class rồi biên js script để show/hide²
• Hai là zùng Alpine³

Cách 1 có vẻ zễ hơn nhưng hơi rắc rối vì chưa có mẫu sẵn. Cách 2 có mẫu đã làm (single pages, show gallery) nhưng Alpine code cần biên vào html. Tailwind chỉ cho thêm vào class thoy thì fải?

Mò mẫm xem thienha làm thenao. Thấy có bài zùng x-collapse plugin cũng hay mà fuctap vaidai. Mò tiếp vào tailwind thấy có sẵn open/closed state⁴, nhưng markdown list không render được ra html tags kiểu ý.

Note 1: Thử zùng thay thế show gallery ở post trước (làm thử cho biết), đóng mở được nhưng modal popup mất taczung.

Note 2: Biên thẳng html code trong bài nhưng noizung bên trong cũng render ra html. Theo thảo luận ở đây thì vẫn biên markdown trong html được. 💡 Wow!

Tạm hài lòng với jaifap thêm html code trong markdown content vậy

Biên thenay (lưu ý để zòng trống a.k.a blank line):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<details>

<summary>click to open</summary>

## title
content

content

</details>

Nó ra thenay:

Danger inside ⚠️

Cuối cùng cũng mò được cách hienthi toggle list

Tuy không được “chính thống” lắm, nhưng từ file export của Notion cũng chỉ fải thêm một ít html code là hienthi được. Đoạn html thêm vào này không ảnh hưởng ji tới markdown content. Preview bằng vscode (không chạy qua hugo) vẫn đóng mở được như thường. Xem online trên github cũng ngon