The issue has been closed

Add button to collapse readme/markdown sections #3224

fregante posted onGitHub

Readmes can become link (e.g. https://github.com/sindresorhus/refined-github) so it would be useful sometimes to collapse/expand all sections to sort of generate a temporary "Table of Contents"

<table><th>Open<th>Collapsed

open

collapsed

</table>

This is especially useful when looking at API documentation like in https://github.com/fregante/text-field-edit

<table><th>Open<th>Collapsed

</table>

/* demo CSS */
.markdown-body h2 ~ p,
.markdown-body h2 ~ ul,
.markdown-body h2 ~ div,
.markdown-body h2 ~ table,
.markdown-body h2 ~ details {
    display: none;
}

I'm thinking that this could be implemented as a "click to toggle" on each heading, plus the usual "alt-click to toggle all". Basically no UI.

Alternatively this could be coupled with a "toggle all" button next to edit-readme

If this is going to require JS, we might as well use that JS to wrap heading and content in <details> and <summary> elements.

posted by notlmn almost 5 years ago

That could be an option, but I’m concerned it messes with the spacing; I don’t want the style to feel off even before the user clicks anything. It’s worth a try though

posted by fregante almost 5 years ago

I've noticed PR #4023, and I remembered the following userscripts by @Mottie which already cover this issue (collapse/expand all sections + generate a table of contents) and much more, and all they work fine. Maybe you'd like to check them to see how they work and perhaps somehow incorporate them in RG ?

posted by darkred about 4 years ago

I'm not a fan of the UI nor of the code of any of those, I think this is achievable with much fewer lines than https://raw.githubusercontent.com/Mottie/GitHub-userscripts/master/github-collapse-markdown.user.js

But it's definitely worth looking into for any exceptions/pitfalls to be aware of.

GitHub collapse in comment (install)

We have a feature that limits the height of some blocks. The only thing we could to there is to allow the user to drop the limit entirely on a block if desired (just once, no undo)

GitHub table of contents (install)

I feel that the suggested feature is a good compromise, given a "collapse/expand all" button. For full TOCs one can install one of the many GitHub TOC extensions/userscripts available.

posted by fregante about 4 years ago

Fund this Issue

$0.00

Funded

Pull requests

Add button to collapse readme/markdown sections #3224

Company

Community

Support

Connect