diff --git a/README.md b/README.md
index ef1d5a5..5170033 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@ This repo is inspired by the [@jbrandchaud/til](https://github.com/jbranchaud/ti
- [Cypress](#cypress)
- [JavaScript](#javascript)
- [Jira](#jira)
+- [Markdown](#markdown)
- [Material UI](#material-ui)
- [Scrum](#scrum)
@@ -25,6 +26,7 @@ This repo is inspired by the [@jbrandchaud/til](https://github.com/jbranchaud/ti
### JavaScript
+- [\[Bookmarklet\] - insert text snippet at current cursor position](markdown/collapsible-sections-plus-bookmarklet.md)
- [\[Bookmarklet\] - remove `notranslate` class that prevents whole page translation](javascript/bookmarklet-remove-notranslate-class-that-prevents-whole-page-translation.md)
- [Sort an array of strings/objects alphabetically](javascript/sort-array-of-strings-alphabetical.md)
@@ -34,6 +36,10 @@ This repo is inspired by the [@jbrandchaud/til](https://github.com/jbranchaud/ti
- [Automation: Find the smart value for a field](jira/automation-find-smart-value-for-field.md)
- [Automation: update task `Story point estimate` when subtask values change](jira/automation-sum-of-story-point-estimate.md)
+### Markdown
+
+- [Collapsible Sections + Bookmarklet](markdown/collapsible-sections-plus-bookmarklet.md)
+
### Material UI
- [`sx` prop interprets `number` values inconsistently](material-ui/sx-prop-interprets-number-values-inconsistently.md)
diff --git a/markdown/collapsible-sections-plus-bookmarklet.md b/markdown/collapsible-sections-plus-bookmarklet.md
new file mode 100644
index 0000000..a5de584
--- /dev/null
+++ b/markdown/collapsible-sections-plus-bookmarklet.md
@@ -0,0 +1,127 @@
+# Collapsible Sections + Free bonus bookmarklet! 💥
+
+Collapsible sections are great! They're really useful and I think they're underutilized because people don't know about them or forgot how to use them properly. For a long time, I didn't know Markdown has this feature.
+
+Collapsible sections are especially great to segment a huge amount of information and let the reader decide if a particular section is relevant to them. If some information is extremely important to 20% of readers, why force all readers to scan through it and decide how far to skip?
+
+## Requirements
+
+More detailed 👇
+
+```xml
+
+ Always visible. Can **ONLY** be plaintext
+
+ Markdown for
+ collapsible content
+ goes here.
+
+
+```
+
+Minimalist 👇
+
+```xml
+
+ Always visible. Can **ONLY** be plaintext
+
+ Collapsible content (Markdown-stylable)
+
+
+```
+
+## Bonus! Free Bookmarklet! 💥
+
+
+ 👉 Click to see the bookmarklet in action 🎬
+
+https://user-images.githubusercontent.com/24983797/173832754-3331ee59-7b7c-4c82-add4-9083a3f22885.mov
+
+
+
+
+
+- Copy this code:
+ - `javascript: (() => { const ele = document.activeElement; ele.setRangeText('\n Always visible. Can **ONLY** be plaintext
\n\n Collapsible content (Markdown-stylable)\n \n', ele.selectionStart, ele.selectionEnd, 'select'); })();`
+- Create a bookmark in your browser (Chrome 102 tested)
+- Paste the code as the bookmark's `URL`.
+
+To use it:
+
+- Click on an editable text field so you can see the text cursor.
+- Click the bookmarklet to insert a minimalist snippet for a collapsible section at your current cursor position.
+- Profit (unless you tried to use it in an `iframe` element 😢)
+
+
+ *️⃣
+
+The `empty lines` are not required in **all** situations, but they're harmless and essential for **some** situations, so it's easier to remember to always include them.
+
+
+
+
+
+## Full disclosure
+
+All the content below comes directly from a very helpful and thorough [Gist](https://gist.github.com/pierrejoubert73/902cc94d79424356a8d20be2b382e1ab) with 814 stars, 109 forks, 107 comments, and 4 revisions. Some comments pointed out edge cases and improvements that led to the excellent Gist we have today. I wanted to keep my summary short and sweet, but I also wanted others to marvel at the beauty of more complex collapsible sections without having to click on a link. Enjoy!
+
+
+
+## Gist content
+
+## A collapsible section containing markdown
+
+
+ Click to expand!
+
+ ### Heading
+ 1. A numbered
+ 2. list
+ * With some
+ * Sub bullets
+
+
+## A collapsible section containing code
+
+
+
+
+ Click to expand!
+
+ ```javascript
+ function logSometing(something) {
+ console.log(`Logging: ${something}`);
+ }
+ ```
+
+
+## How to structure
+
+
+
+```
+# A collapsible section with markdown
+
+ Click to expand!
+
+## Heading
+
+1. A numbered
+2. list
+_ With some
+_ Sub bullets
+
+
+```
+
+**Two important rules:**
+
+1. Make sure you have an **empty line** after the closing `` tag, otherwise the markdown/code blocks won't show correctly.
+2. Make sure you have an **empty line** after the closing `` tag if you have multiple collapsible sections.
+
+## Resources
+
+- Original [Gist]() about collapsible sections.
+ - [Comment](https://gist.github.com/pierrejoubert73/902cc94d79424356a8d20be2b382e1ab?permalink_comment_id=4169582#gistcomment-4169582) that inspired the bookmarklet.
+- StackOverflow [answer](https://stackoverflow.com/a/34278578/10117759) that showed how to insert text at the current cursor.
+- FreeCodeCamp article about [bookmarklets](https://www.freecodecamp.org/news/what-are-bookmarklets/)