Source block html export show block on hover

Question

I am working on a document that has multiple questions and answers to that question in a source block. Simplified example is as follows:

• Q1. (a+b)^2

#+begin_center
a^2 + 2ab + b^2 
#+end_center

After exporting the document to html, I'd like to be able to see the questions by default and reveal the answer block ONLY when I hover over the question (or something close, like click of a button on the source block).

I have come across docs on how to achieve hide/show behavior in org-reveal (presentations). Another example is special-blocks-extras but got nowhere as it didn't make any difference to the html output!

Is there a simple way to achieve what I want in plain html export? Can this be achieved with custom style, css? Any pointers would be appreciated!

Answer 1

The answer here is put together hastily with information from HTML <details> Tag.

I know nothing about HTMLor CSS. So, don't quote me on this reply :-P

To get the details tag you need #+html_doctype: html5 and #+options: html5-fancy:t option.

To get this

export the following snippet to HTML (You don't need any 3rd-party packages)

#+begin_details
#+begin_summary
(a+b)^2
#+end_summary

a^2 + 2ab + b^2
#+end_details

#+options: html-link-use-abs-url:nil html-postamble:nil
#+options: html-preamble:t html-scripts:nil html-style:t
#+options: html5-fancy:t tex:t
#+html_doctype: html5
#+html_container: div
#+html_content_class: content
#+description:
#+keywords:
#+html_link_home:
#+html_link_up:
#+html_mathjax:
#+html_equation_reference_format: \eqref{%s}
#+html_head:
#+html_head_extra:
#+subtitle:
#+infojs_opt:
#+creator: <a href="https://www.gnu.org/software/emacs/">Emacs</a> 29.0.50 (<a href="https://orgmode.org">Org</a> mode 9.5.3)
#+latex_header:

#+HTML_HEAD_EXTRA: <style>

#+HTML_HEAD_EXTRA: details > summary {
#+HTML_HEAD_EXTRA:   padding: 4px;
#+HTML_HEAD_EXTRA:   cursor: pointer;
#+HTML_HEAD_EXTRA: }
#+HTML_HEAD_EXTRA:
#+HTML_HEAD_EXTRA: details > p {
#+HTML_HEAD_EXTRA:   background-color: #eeeeee;
#+HTML_HEAD_EXTRA:   padding: 4px;
#+HTML_HEAD_EXTRA:   margin: 1em;
#+HTML_HEAD_EXTRA:   box-shadow: 1px 1px 2px #bbbbbb;
#+HTML_HEAD_EXTRA: }

#+HTML_HEAD_EXTRA: summary > p {
#+HTML_HEAD_EXTRA:   background-color: #00ff00;
#+HTML_HEAD_EXTRA:   padding: 4px;
#+HTML_HEAD_EXTRA:   margin: 0;
#+HTML_HEAD_EXTRA:   box-shadow: 1px 1px 2px #bbbbbb; display: inline;
#+HTML_HEAD_EXTRA: }

#+HTML_HEAD_EXTRA: </style>

---

FWIW, you can search for details in this repo https://github.com/alhassy/org-special-block-extras --- there is a search box on the top left right next to the cat logo --- and I get a hit at https://raw.githubusercontent.com/alhassy/org-special-block-extras/208762b007eefaaa2ba200d426583fe9e99e4afa/org-special-block-extras.org. Search for EmacsConf 2020 Abstract in the this org file and try to correlate it with the corresponing EmacsConf 2020 Abstract in the HTML file https://alhassy.github.io/org-special-block-extras/.

If I were you I would just start with that org file and strip it down to the #+begin_details ... #+end_details tag and go from there.

My guess is

#+begin_details Question
Answer
#+end_details

is what you need if you are using org-special-block-extras.

I hope the information here will get you started in the right direction ...