Added expandible/collapsible section example

[KnutAM]

Thanks to the help from @tlienart on Slack, this is working.

2 limitations are noted so far

1. Not possible to include code environments in the collapsed section (a shame as this would look nice in the example)
2. Not possible to use custom commands outside math environments

[tlienart]

@KnutAM aha this is just a small issue with whitespaces, add whitespaces around the #1 and #2 and everything will work, see for instance this fully working example with both code and custom

+++
title = "Franklin Sandbox"
+++

~~~
<style>
/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
</style>
~~~

\newcommand{\foo}{**Hello!**}

\newcommand{\collap}[2]{
~~~<button type="button" class="collapsible">~~~ #1 ~~~</button><div class="content">~~~ #2 ~~~</div>~~~
}


\collap{HEADER}{
**CONTENT** Foo bar\\
Baz
```!
1+1
```
\foo
}

~~~
<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>
~~~

[KnutAM]

Yes, that solves the code part! (I thought that when using Julia I wouldn't have to care so much about white spaces, coming from Python/Fortran:))
Anyways, it looks better now. From my point ready to merge if you want to!
The other problem was actually unrelated, I tried to define (as a test) \newcommand{\fat}[1]{**#1**} but then \fat{test} yields ** test**, but this also occurs outside the collapsible

[tlienart]

I thought that when using Julia I wouldn't have to care so much about white spaces, coming from Python/Fortran:)

Julia is not at fault here, Franklin is, there are some slightly subtle things in terms of how the parser detects blocks or inline elements that are not great; this is fixed but will come in the next version.

With respect to your comment use:

\newcommand{\fat}[1]{**!#1**}

note the ! , as a short explanation is that insertion of arguments adds a whitespace on the left by default to prevent some ambiguities (esp in maths commands), using ! suppresses that. (again this will be adjusted in next version)

[tlienart]

thanks for this!

[aburousan]

I have a question: For some reason, in my case the collapsiblecontent is not hidden by default. Any idea why?
I have followed instructions from this page: https://franklinjl.org/demos/