# Source block html export show block on hover

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!

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-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_mathjax:
#+html_equation_reference_format: \eqref{%s}
#+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)



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

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