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:

Why is this in green?

You will learn that later below in CSS section.

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.

Open by default disclosure widget #

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:

Some Summary

Here are the details.

For open-by-default disclosure widgets, the #+attr_html keyword specifically needs to contain :open t.

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 green, and all the disclosure details to show in blue.

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