Details and summary

The “details” Org Special Block (#+begin_details .. #+end_details) is used for generating the Details disclosure elements <details> and <summary>.

The summaries nested in these “details” Org Special blocks are created using the “summary” Org Special block #+begin_summary .. #+end_summary.

Regular details disclosure #

#+begin_details
#+begin_summary
Why is this in *green*?
#+end_summary
You will learn that later below in [[#details-css][CSS]] section.
#+end_details

will render like below:

Details disclosure without details or without summary #

• If the details Special Block does not contain the summary Special Block, a details-only disclosure will be created.

  #+begin_details
  Here are the /details/.
  #+end_details
  

  will render like below:

  Here are the details.

  In the absence of summary, most browsers will use a default string “Details” for the summary.

• If the details Special Block contains only the summary Special Block, a summary-only disclosure will be created.

  #+begin_details
  #+begin_summary
  Some Summary
  #+end_summary
  #+end_details
  

  will render like below:

  Some Summary

  Even if the details part is absent, the collapsing triangle will still be rendered. But nothing will show up when that triangle is uncollapsed.. as the details portion is not there.

Disclosure widget open by default #

The <details> disclosure widget is initially closed by default. But it can be made to show up opened by default by adding the :open t attribute like this:

#+attr_html: :open t
#+begin_details
#+begin_summary
Some Summary
#+end_summary
Here are the /details/.
#+end_details

will render like below:

CSS rules for these widgets #

• details summary will apply to the summary portion of the disclosure widget.
• details .details will apply to the details portion of the disclosure widget.

For instance, the CSS rules set using below caused all the disclosure summaries to show in <span class=“green”>green</span>, and all the disclosure details to show in <span class=blue>blue</span>.

#+html: <style>details summary { color: green; }</style>
#+html: <style>details .details { color: blue; }</style>