Add Disclose Additional Details as an HTML TIL

Author: jbranchaud

README.md

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
 
-_1559 TILs and counting..._
+_1560 TILs and counting..._
 
 See some of the other learning resources I work on:
 - [Ruby Operator Lookup](https://www.visualmode.dev/ruby-operators)
@@ -454,6 +454,7 @@ See some of the other learning resources I work on:
 - [Adding Alt Text To An Image](html/adding-alt-text-to-an-image.md)
 - [Determine Which Button Submitted The Form](html/determine-which-button-submitted-the-form.md)
 - [Disable Auto-Completion For A Form Input](html/disable-auto-completion-for-a-form-input.md)
+- [Disclose Additional Details](html/disclose-additional-details.md)
 - [Make Elements Non-Interactive With Inert](html/make-elements-non-interactive-with-inert.md)
 - [Prevent Search Engines From Indexing A Page](html/prevent-search-engines-from-indexing-a-page.md)
 - [Render Text As Superscript](html/render-text-as-superscript.md)

html/disclose-additional-details.md

@@ -0,0 +1,28 @@
+# Disclose Additional Details
+
+You can add extra details to an HTML page that are only disclosed if the user
+chooses to disclose them. To do that, we use the `<details>` tag. This tag
+needs to have a `<summary>` tag nested within it. Anything else nested within
+`<details>` will be what is disclosed when it is toggled open. The `<summary>`
+is what is displayed when it is not open.
+
+Here is a `<detail>` block I recently added to [Ruby Operator
+Lookup](https://www.visualmode.dev/ruby-operators).
+
+```html
+<details className="pt-2 pb-6">
+  <summary>What is this thing?</summary>
+  <p className="pl-3 pt-2 text-gray-700 text-sm">
+    Ruby is an expressive, versatile, and flexible dynamic programming language. That means there are all kinds of syntax features, operators, and symbols we can encounter that might look unfamiliar and are hard to look up. Ruby Operator Lookup is a directory of all these language features.
+  </p>
+  <p className="pl-3 pt-2 text-gray-700 text-sm">
+    Use the search bar to narrow down the results. Then click on a button for the operator or symbol you want to explore further.
+  </p>
+</details>
+```
+
+On page load, the only thing we see is "What is this thing?" with a triangle
+symbol next to it. If we click the summary, then the entire details block
+(those two `<p>` tags) are disclosed.
+
+[source](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)