barkode · July 29, 2024 19:50 · Mar 5, 2024 · Aug 17, 2023 · Aug 17, 2023 · Aug 17, 2023
diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -39,7 +39,6 @@
 ````
 
 ## 3. Tips & Tricks
-Discover some handy customizations for your collapsible sections.
 
 ### 3.1 Expand by Default
 To have a collapsible section expanded by default, simply include the 'open' attribute within the `<details>` tag:

diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -1,5 +1,5 @@
 # How to add a collapsible section in markdown
-# 1. Example
+## 1. Example
 <details>
   <summary>Click me</summary>
 
@@ -18,7 +18,7 @@
 </details>
 
 
-# 2. Code/Markdown
+## 2. Code/Markdown
 ````md
 <details>
   <summary>Click me</summary>
@@ -38,11 +38,11 @@
 </details>
 ````
 
-# 3. Tips & Tricks
-A couple neat things you can do to customize your collapsible sections.
+## 3. Tips & Tricks
+Discover some handy customizations for your collapsible sections.
 
-### 3.1 Expand by default
-A collapsible section can be expanded by default. Simply add 'open' in the `<details>` tag:
+### 3.1 Expand by Default
+To have a collapsible section expanded by default, simply include the 'open' attribute within the `<details>` tag:
 
 <details open>
   <summary>Hello</summary>
@@ -56,8 +56,8 @@ A collapsible section can be expanded by default. Simply add 'open' in the `<det
 </details>
 ```
 
-### 3.2 Customize clickable text
-You can change what the clickable text looks like by adding styling inside of the `<summary>` tags:
+### 3.2 Customize Clickable Text
+You can modify the appearance of the clickable text by adding styling inside the `<summary>` tags:
 
 <details>
   <summary><i>Wow, so fancy</i></summary>
@@ -71,8 +71,9 @@ You can change what the clickable text looks like by adding styling inside of th
 </details>
 ```
 
-### 3.3 Nested collapsible sections
-When adding headings inside of your collapsible sections,remember to add a new line after the `<summary>` tag.
+### 3.3 Nested Collapsible Sections
+NB: When including headings within collapsible sections, remember to add a new line after the `<summary>` tag.
+
 <details>
 <summary>Section A</summary>
 <details>
@@ -103,6 +104,6 @@ When adding headings inside of your collapsible sections,remember to add a new l
 </details>
 ```
 
-# Troubleshooting
-* If some markdown or styling such as `# My Title` does not render in the collpsible section, try adding a break after the `</summary>` tag.
-* If your section does not render, it's probably malformed. Try copying the working examples here and work from there!
+## 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!
diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -57,7 +57,7 @@ A collapsible section can be expanded by default. Simply add 'open' in the `<det
 ```
 
 ### 3.2 Customize clickable text
-You can change what the clickable text looks like by adding markup inside of the `<summary>` tags:
+You can change what the clickable text looks like by adding styling inside of the `<summary>` tags:
 
 <details>
   <summary><i>Wow, so fancy</i></summary>

diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -42,18 +42,16 @@
 A couple neat things you can do to customize your collapsible sections.
 
 ### 3.1 Expand by default
-You instruct a collapsible section to be expanded by default. Simply add 'open' in the details tag:
+A collapsible section can be expanded by default. Simply add 'open' in the `<details>` tag:
 
 <details open>
   <summary>Hello</summary>
-
   World!
 </details>
 
 ```
 <details open>
   <summary>Hello</summary>
-
   World!
 </details>
 ```
@@ -63,20 +61,18 @@ You can change what the clickable text looks like by adding markup inside of the
 
 <details>
   <summary><i>Wow, so fancy</i></summary>
-
   <b>WOW, SO BOLD</b>
 </details>
 
 ```
 <details>
   <summary><i>Wow, so fancy</i></summary>
-  
   <b>WOW, SO BOLD</b>
 </details>
 ```
 
 ### 3.3 Nested collapsible sections
-When adding markup inside of your collapsible sections,remember to add the proper spacing before and after the `<details>` and `<summary>` tags. See the [rules](#rules) section.
+When adding headings inside of your collapsible sections,remember to add a new line after the `<summary>` tag.
 <details>
 <summary>Section A</summary>
 <details>
@@ -107,6 +103,6 @@ When adding markup inside of your collapsible sections,remember to add the prope
 </details>
 ```
 
-# Rules (If you don't do this, your code may not work)
-1. Always have an **empty line** after the `</summary>` tag
-1. Always have an **empty line** after each `</details>` tag
+# Troubleshooting
+* If some markdown or styling such as `# My Title` does not render in the collpsible section, try adding a break after the `</summary>` tag.
+* If your section does not render, it's probably malformed. Try copying the working examples here and work from there!
diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -42,7 +42,7 @@
 A couple neat things you can do to customize your collapsible sections.
 
 ### 3.1 Expand by default
-You instrcut tell a collapsible section to be expanded by default. Simply add 'open' in the details tag:
+You instruct a collapsible section to be expanded by default. Simply add 'open' in the details tag:
 
 <details open>
   <summary>Hello</summary>

diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -42,7 +42,7 @@
 A couple neat things you can do to customize your collapsible sections.
 
 ### 3.1 Expand by default
-The collapsible section can expanded by default. Simply add 'open' in your details tag:
+You instrcut tell a collapsible section to be expanded by default. Simply add 'open' in the details tag:
 
 <details open>
   <summary>Hello</summary>

diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -1,5 +1,5 @@
-# How to add a collapsible section in markdown.
-## Example
+# How to add a collapsible section in markdown
+# 1. Example
 <details>
   <summary>Click me</summary>
 
@@ -9,7 +9,7 @@
      * Baz
      * Qux
 
-  ### Some Code
+  ### Some Javascript
   ```js
   function logSomething(something) {
     console.log('Something', something);
@@ -18,7 +18,7 @@
 </details>
 
 
-## Code
+# 2. Code/Markdown
 ````md
 <details>
   <summary>Click me</summary>
@@ -29,7 +29,7 @@
      * Baz
      * Qux
 
-  ### Some Code
+  ### Some Javascript
   ```js
   function logSomething(something) {
     console.log('Something', something);
@@ -38,23 +38,75 @@
 </details>
 ````
 
-## Tips & Tricks (WIP)
-### Expand by default
+# 3. Tips & Tricks
+A couple neat things you can do to customize your collapsible sections.
+
+### 3.1 Expand by default
 The collapsible section can expanded by default. Simply add 'open' in your details tag:
+
+<details open>
+  <summary>Hello</summary>
+
+  World!
+</details>
+
 ```
 <details open>
-...
+  <summary>Hello</summary>
+
+  World!
 </details>
 ```
 
-### Customize clickable text
+### 3.2 Customize clickable text
 You can change what the clickable text looks like by adding markup inside of the `<summary>` tags:
+
+<details>
+  <summary><i>Wow, so fancy</i></summary>
+
+  <b>WOW, SO BOLD</b>
+</details>
+
 ```
-...
-<summary><h1>IMPORTANT INFO</h1></summary>
-...
+<details>
+  <summary><i>Wow, so fancy</i></summary>
+  
+  <b>WOW, SO BOLD</b>
+</details>
+```
+
+### 3.3 Nested collapsible sections
+When adding markup inside of your collapsible sections,remember to add the proper spacing before and after the `<details>` and `<summary>` tags. See the [rules](#rules) section.
+<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>
+
+```
+<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>
 ```
 
-## Rules (If you don't do this, your code may not work)
+# Rules (If you don't do this, your code may not work)
 1. Always have an **empty line** after the `</summary>` tag
 1. Always have an **empty line** after each `</details>` tag
diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -47,6 +47,14 @@ The collapsible section can expanded by default. Simply add 'open' in your detai
 </details>
 ```
 
+### Customize clickable text
+You can change what the clickable text looks like by adding markup inside of the `<summary>` tags:
+```
+...
+<summary><h1>IMPORTANT INFO</h1></summary>
+...
+```
+
 ## Rules (If you don't do this, your code may not work)
 1. Always have an **empty line** after the `</summary>` tag
 1. Always have an **empty line** after each `</details>` tag
diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -38,7 +38,7 @@
 </details>
 ````
 
-## Tips
+## Tips & Tricks (WIP)
 ### Expand by default
 The collapsible section can expanded by default. Simply add 'open' in your details tag:
 ```

diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -39,7 +39,13 @@
 ````
 
 ## Tips
-1. Expand by default - The collapsible section can expanded by default. Simply add 'open' in your details tag: `<details open>`
+### Expand by default
+The collapsible section can expanded by default. Simply add 'open' in your details tag:
+```
+<details open>
+...
+</details>
+```
 
 ## Rules (If you don't do this, your code may not work)
 1. Always have an **empty line** after the `</summary>` tag

diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -38,6 +38,9 @@
 </details>
 ````
 
+## Tips
+1. Expand by default - The collapsible section can expanded by default. Simply add 'open' in your details tag: `<details open>`
+
 ## Rules (If you don't do this, your code may not work)
 1. Always have an **empty line** after the `</summary>` tag
 1. Always have an **empty line** after each `</details>` tag
diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -8,7 +8,7 @@
   2. Bar
      * Baz
      * Qux
-     
+
   ### Some Code
   ```js
   function logSomething(something) {

diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -1,7 +1,7 @@
 # How to add a collapsible section in markdown.
 ## Example
 <details>
-    <summary>Click me</summary>
+  <summary>Click me</summary>
 
   ### Heading
   1. Foo

diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -1,3 +1,4 @@
+# How to add a collapsible section in markdown.
 ## Example
 <details>
     <summary>Click me</summary>

diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -1,41 +1,42 @@
-## How to
-````md
+## Example
 <details>
-  <summary>Click me</summary>
-  
+    <summary>Click me</summary>
+
   ### Heading
   1. Foo
   2. Bar
      * Baz
      * Qux
-
+     
   ### Some Code
   ```js
   function logSomething(something) {
     console.log('Something', something);
   }
   ```
 </details>
-````
 
-## Example
-<details>
-    <summary>Click me</summary>
 
+## Code
+````md
+<details>
+  <summary>Click me</summary>
+
   ### Heading
   1. Foo
   2. Bar
      * Baz
      * Qux
-     
+
   ### Some Code
   ```js
   function logSomething(something) {
     console.log('Something', something);
   }
   ```
 </details>
+````
 
-## Rules
-1. Have an **empty line** after the `</summary>` tag or markdown/code blocks will not render.
-1. Have an **empty line** after each `</details>` tag if you have multiple collapsible sections.
+## Rules (If you don't do this, your code may not work)
+1. Always have an **empty line** after the `</summary>` tag
+1. Always have an **empty line** after each `</details>` tag
diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -37,5 +37,5 @@
 </details>
 
 ## Rules
-1. Have an **empty line** after the closing `</summary>` tag or Markdown/code blocks will not render.
-1. Have an **empty line** after the closing `</details>` tag if you have multiple collapsible sections after one another.
+1. Have an **empty line** after the `</summary>` tag or markdown/code blocks will not render.
+1. Have an **empty line** after each `</details>` tag if you have multiple collapsible sections.
diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -11,7 +11,7 @@
 
   ### Some Code
   ```js
-  function logSometing(something) {
+  function logSomething(something) {
     console.log('Something', something);
   }
   ```
@@ -30,7 +30,7 @@
 
   ### Some Code
   ```js
-  function logSometing(something) {
+  function logSomething(something) {
     console.log('Something', something);
   }
   ```

diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -11,9 +11,9 @@
 
   ### Some Code
   ```js
-    function logSometing(something) {
-      console.log('Something', something);
-    }
+  function logSometing(something) {
+    console.log('Something', something);
+  }
   ```
 </details>
 ````
@@ -30,9 +30,9 @@
 
   ### Some Code
   ```js
-    function logSometing(something) {
-      console.log('Something', something);
-    }
+  function logSometing(something) {
+    console.log('Something', something);
+  }
   ```
 </details>
 

diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -31,7 +31,7 @@
   ### Some Code
   ```js
     function logSometing(something) {
-      console.log(`Logging: ${something}`);
+      console.log('Something', something);
     }
   ```
 </details>

diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -1,7 +1,7 @@
 ## How to
 ````md
 <details>
-  <summary>Click to expand!</summary>
+  <summary>Click me</summary>
 
   ### Heading
   1. Foo

diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -6,8 +6,8 @@
   ### Heading
   1. Foo
   2. Bar
-    * Baz
-    * Qux
+     * Baz
+     * Qux
 
   ### Some Code
   ```js
@@ -25,8 +25,8 @@
   ### Heading
   1. Foo
   2. Bar
-    * Baz
-    * Qux
+     * Baz
+     * Qux
 
   ### Some Code
   ```js

diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -1,38 +1,41 @@
-# A collapsible section containing markdown
+## How to
+````md
 <details>
   <summary>Click to expand!</summary>
 
-  ## Heading
-  1. A numbered
-  2. list
-     * With some
-     * Sub bullets
+  ### Heading
+  1. Foo
+  2. Bar
+    * Baz
+    * Qux
+
+  ### Some Code
+  ```js
+    function logSometing(something) {
+      console.log('Something', something);
+    }
+  ```
 </details>
+````
 
-# A collapsible section containing code
+## Example
 <details>
-  <summary>Click to expand!</summary>
-
-  ```javascript
+    <summary>Click me</summary>
+
+  ### Heading
+  1. Foo
+  2. Bar
+    * Baz
+    * Qux
+
+  ### Some Code
+  ```js
     function logSometing(something) {
       console.log(`Logging: ${something}`);
     }
   ```
 </details>
 
-# How to structure
-```
-# A collapsible section with markdown
-<details>
-  <summary>Click to expand!</summary>
-  
-  ## Heading
-  1. A numbered
-  2. list
-     * With some
-     * Sub bullets
-</details>
-```
-**Two important rules:**
-1. Make sure you have an **empty line** after the closing `</summary>` tag, otherwise the markdown/code blocks won't show correctly.
-2. Make sure you have an **empty line** after the closing `</details>` tag if you have multiple collapsible sections.
+## Rules
+1. Have an **empty line** after the closing `</summary>` tag or Markdown/code blocks will not render.
+1. Have an **empty line** after the closing `</details>` tag if you have multiple collapsible sections after one another.
diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -14,9 +14,8 @@
   <summary>Click to expand!</summary>
 
   ```javascript
-    function whatIsLove() {
-      console.log('Baby Don't hurt me. Don't hurt me');
-      return 'No more';
+    function logSometing(something) {
+      console.log(`Logging: ${something}`);
     }
   ```
 </details>
@@ -34,6 +33,6 @@
      * Sub bullets
 </details>
 ```
-**NB:** Make sure you have an **empty line** after the closing `</summary>` tag, otherwise the markdown/code blocks won't show correctly.
-
-**NB**: Make sure you have an **empty line** after the closing `</details>` tag if you have multiple collapsible sections.
+**Two important rules:**
+1. Make sure you have an **empty line** after the closing `</summary>` tag, otherwise the markdown/code blocks won't show correctly.
+2. Make sure you have an **empty line** after the closing `</details>` tag if you have multiple collapsible sections.
diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -1,4 +1,4 @@
-# A collapsible section with markdown
+# A collapsible section containing markdown
 <details>
   <summary>Click to expand!</summary>
 
@@ -9,7 +9,7 @@
      * Sub bullets
 </details>
 
-# A collapsible section with code
+# A collapsible section containing code
 <details>
   <summary>Click to expand!</summary>
 
@@ -21,7 +21,7 @@
   ```
 </details>
 
-# How to structure the markup
+# How to structure
 ```
 # A collapsible section with markdown
 <details>
@@ -34,6 +34,6 @@
      * Sub bullets
 </details>
 ```
-**NB:** Make sure you have an **empty line** after the closing `</summary>` tag.
+**NB:** Make sure you have an **empty line** after the closing `</summary>` tag, otherwise the markdown/code blocks won't show correctly.
 
 **NB**: Make sure you have an **empty line** after the closing `</details>` tag if you have multiple collapsible sections.
diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -1,7 +1,39 @@
-Your markdown heading here
+# A collapsible section with markdown
 <details>
-  <summary>
-    Show details
-  </summary>
-  Your markdown content here
-</details>
+  <summary>Click to expand!</summary>
+
+  ## Heading
+  1. A numbered
+  2. list
+     * With some
+     * Sub bullets
+</details>
+
+# A collapsible section with code
+<details>
+  <summary>Click to expand!</summary>
+
+  ```javascript
+    function whatIsLove() {
+      console.log('Baby Don't hurt me. Don't hurt me');
+      return 'No more';
+    }
+  ```
+</details>
+
+# How to structure the markup
+```
+# A collapsible section with markdown
+<details>
+  <summary>Click to expand!</summary>
+  
+  ## Heading
+  1. A numbered
+  2. list
+     * With some
+     * Sub bullets
+</details>
+```
+**NB:** Make sure you have an **empty line** after the closing `</summary>` tag.
+
+**NB**: Make sure you have an **empty line** after the closing `</details>` tag if you have multiple collapsible sections.
diff --git a/markdown-details-collapsible.md b/markdown-details-collapsible.md
@@ -0,0 +1,7 @@
+Your markdown heading here
+<details>
+  <summary>
+    Show details
+  </summary>
+  Your markdown content here
+</details>