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!

Improve this question

1 Answer 1

Reset to default
2

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

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.