latex to html with collapsing

Question

Is there a solution to this

in terms of HTML? In other words, can I compile to HTML and have certain parts of my work collapsed?

So for instance, I would want something like this

\documentclass{article}

\begin{document}

\begin{thm}
blah blah blah
\end{thm}
\begin{collapse}
\begin{proof}
  First step is true.
  \begin{collapse}
  First step is true because blah blah blah. 
  \end{collapse}
  Second step is true.
  Final step is true. 
\end{proof}
\end{collapse}

\end{document}

to generate HTML where I can click on something to expand the proof and also click on something else to expand the details. It would be nice if the word "Proof" just appeared as a link. I'm trying to find simple CSS that does this. And the collapse environment should accept an argument on what text to make into a link.

Here is the HTML/CSS/JS:

http://cssdeck.com/labs/vx3fpxc0

(I have no idea if the code in that link is correct. I just modified somebody else's so that it works.)

Welcome to TeX.SX! What is the problem with doing it manually and how should a converter know which parts to collapse? — TeXnician, Dec 29 '18 at 08:20
this needs to be done using CSS and JavaScript, so any converter which can include custom CSS and JavaScript to the converted document can do the job. I am sure tex4ht can do this. We need a sample document and more concrete specification what should be collapsed, then it will be possible to provide a concrete solution. — michal.h21, Dec 29 '18 at 09:48
@TeXnician I was thinking you wrap the thing you want collapsed within an environment, like here. This could be a comment, a proof, or details of a proof you want to omit. What do you mean by manually? I think this has the benefit of working across more platforms. (The PDF collapsing doesn't work in all viewers.) — Alex Gramatikov, Dec 29 '18 at 15:16

score 6 · Accepted Answer · answered Dec 29 '18 at 20:18

Here is a solution using tex4ht. I've modified your example slightly to provide definitions for thm and collapse environments:

% https://tex.stackexchange.com/q/467746/2891
\documentclass{article}
\usepackage{amsthm}
\newtheorem{thm}{Theorem}


\newenvironment{collapse}{}{}

\begin{document}

\begin{thm}
blah blah blah
\end{thm}
\begin{collapse}
\begin{proof}
  First step is true.
  \begin{collapse}
  First step is true because blah blah blah. 
  \end{collapse}
  Second step is true.
  Final step is true. 
\end{proof}
\end{collapse}

\end{document}

The JavaScript code should be put in the collapse.js file:

$('[data-toggle]').on('click', function(){
  var id = $(this).data("toggle"),
      $object = $("#" +  id),
      className = "collapse";

  if ($object) {
    if ($object.hasClass(className)) {
      $object.removeClass(className)
      $(this).text("Collapse");
    } else {
      $object.addClass(className)
      $(this).text("Expand");
    }
  }
});

Lastly, we must configure tex4ht to include all the JavaScript and to produce a usable code for the collapse environment. Put the following code in the myconfig.cfg file:

\Preamble{xhtml}
\newcounter{collapseid}
\ConfigureEnv{collapse}{%
\stepcounter{collapseid}
\edef\currentid{collapse-\arabic{collapseid}}
\ifvmode\IgnorePar\fi\EndP\HCode{<div  class="collapse-label"><a data-toggle="\currentid" href="\#">Expand</a></div>\Hnewline<div id="\currentid" class="collapse">}%
\par
}
{\ifvmode\IgnorePar\fi\EndP\HCode{</div>}\par}{}{}
\Css{.collapse{display:none;}}
\Css{.open{display:block;}}
\Configure{@/BODY}{\HCode{<script class="cssdeck" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>}}
\Configure{@/BODY}{\HCode{<script type="text/javascript" src="collapse.js"></script>}}

\begin{document}

\EndPreamble

The \ConfigureEnv{collapse} command configures HTML code inserted to the document. It also produces unique id attribute for each of the collapsed environments and handles paragraph endings. The \Css command is used for the necessary CSS configurations and the \Configure{@/BODY} commands are used to insert the requests for the Java Script files at the end of the page.

The document can be compiled using the following commnad:

make4ht -c myconfig.cfg filename.tex

This is the result (without the HTML header):

   <div class="newtheorem">
<!--l. 12--><p class="noindent" ><span class="head">
<a 
 id="x1-2r1"></a>
<span 
class="cmbx-10">Theorem 1.</span>  </span><span 
class="cmti-10">blah blah blah</span>
</p>
   </div>
   <div class="collapse-label"><a data-toggle="collapse-1" href="#">Expand</a></div> 
<div id="collapse-1" class="collapse">
<!--l. 16--><p class="indent" >
</p>
   <div class="proof">
<!--l. 17--><p class="indent" >   <span class="head">
<span 
class="cmti-10">Proof.</span> </span>First step is true.   </p><div class="collapse-label"><a data-toggle="collapse-2" href="#">Expand</a></div> 
<div id="collapse-2" class="collapse">
<!--l. 19--><p class="indent" >   First step is true because blah blah blah.
</p></div>
<!--l. 21--><p class="indent" >   Second step is true. Final step is true.                                               □
</p>
   </div>
   </div>
   <script class="cssdeck" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><script type="text/javascript" src="collapse.js"></script> 
</body> 
</html>

Here is a interactive example

latex to html with collapsing

1 Answers1