Details tag doesn't show foldout arrow in Firefox

[SilentSin]

I recently found this technique for creating collapsible areas and have been using it quite a lot in my documentation, particularly for long example code blocks.

But I just noticed that it doesn't show the arrow in Firefox so even though it works, it looks exactly like regular text (the page linked above shows the arrow, but Wyam sites don't).

Here's what it looks like in Chrome:

Collapsed:

Expanded:

And here's what it looks like in Firefox:

Collapsed:

Expanded:

I'm not at all familiar with web programming so I have no idea how (or even if) this sort of thing could be solved. If it can be controlled by a style, it would also be nice if it had a border around the whole thing to make it clear which part is collapsible compared to any regular text that comes after it (like the border that appears in Chrome when expanded, but around the whole block not just the summary).

For now I'm going to look into other ways of doing the same thing. This looks somewhat promising.

[SilentSin]

I couldn't get the javascript working for this but I found that I can get the arrow to show up by putting summary { display: list-item } in assets\css\override.less.

The only instance of the word "summary" that I can find in the theme files is in assets\css\bootstrap_normalize.less which has:

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

But changing that to list-item has no effect.

[SilentSin]

After a bit of tinkering I've ended up with the following in assets\css\override.less:

details
{
    border: 1px solid #aaa;
    border-radius: 6px;
    padding: .5em .5em 0;
}

summary
{
    display: list-item;
    margin: -.5em -.5em 0;
    padding: .5em;
    cursor: pointer;
}

details[open] summary
{
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}

Which gives nice borders around the collapsible area:

Collapsed:

Expanded:

And it looks good in both Firefox and Chrome.

[aycippo]

Bumping in case of Wyam resolution ❤️