0

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!

1 Answer 1

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

details block using stock HTML exporter

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 ...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.