Joplin: [Feature Request] Collapsible Sections

[cbop-dev]

Operating system

• Windows
• Linux
• Android

Application

• Desktop
• Mobile

It would be very useful if, in the editor or preview window, entire sections[1] could be collapsed/expanded by clicking/tapping on an icon in the left margin,[2] or, alternately, on the (sub-)heading title.[3] This would make it easier to navigate, read, and/or edit long notes with many headings/sections (preferably both on desktop and mobile apps). There are text-editors and markdown editors that do this sort of thing, including Boostnote, which also includes collapsible lists.

This request is related to, but distinct from, two other feature requests:

• Chapter Entry
• TOC

Those two feature requests involve creating a distinct section or panel for displaying a (generated) outline/TOC. That itself is a useful feature. What I'm requesting, though, is simply to make existing sections collapsible, whether a top level (h1) section or a lower-level (h2-h6). Implementing this would also ameliorate one underlying issue behind those other requests -- the difficulty of navigating long notes.

---

1. That is, sections of the note marked off by heading-level tags, #, ##, etc.
2. E.g., a [+] or [-] icon, or right and down arrows.
3. Like the mobile version of Wikipedia.

[noamgu]

Huge +1 for that

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "backlog" and I will leave it open. Thank you for your contributions.

[cbop-dev]

Dear Bot, this has not been addressed as far as I know.

Dear humans, any foreseeable implementation of this? This would be really important for working on long notes (e.g., equivalent of an academic article or longer).

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[cbop-dev]

Indeed there has been no activity, but it has not been addressed. Without such a feature, using this app for long notes or document writing is a bit impractical.

[cbop-dev]

For reference or for a possible solution: markdown-it-headers-sections is a markdown-it plugin that adds <section> elements to contain headings and content. It even does nested sections. (Though the project seems to have been stale for 2 years, the code is short and simple and is probably still usable.) This plug-in could be used along with Boostrap's collapse feature to implement this request.

[Enzime]

This can be achieved on Joplin using the HTML5 details tag, just like on GitHub with its Markdown:

<details><summary>Click me</summary>

`inline Markdown code`
</details>

Click me

inline Markdown code

[subi54]

Yes, but you can't use markdown between those tags. Plus, collapsible sections are supposed to be far more intuitive than HTML's details tag.

[Enzime]

You can use Markdown between those tags, check my previous example. However I do agree that using the details tag would just be a workaround at best, and something that integrated better would be best.

[subi54]

@Enzime, it does work. Thanks for the tip. I must be doing something wrong before for it to not work. Tell me, if you do # headings, do they show up in toc?

P.S. I think it was because of not leaving any line between the html tags and markdown.

[cbop-dev]

While using <details><summary> tags is a work-around (and what I currently use), it is not ideal since it clutters the markdown with HTML, is not automatic, and does not easily allow one to make the heading itself clickable on a single line. To make this latter possible, I've found this further workaround with details/summary tags. In userstyle.css, add the following CSS code:

summary h1, summary h2, summary h3, summary h4, summary h5, summary h6 {
    display: inline-block;
}

Then, make the headings like this:

<details><summary>

### Heading Title
</summary>

Details go here, with markdown or HTML support...
</details>

This allows markdown, and thus headings, in the "summary", such that the heading is clickable. With this entire solution, however, if a section is collapsed, clicking on the link in the TOC does not expand it.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[digitalillusions]

Just commenting because I stumbled on this feature request and it doesn't seem to be implemented. Also the bot appears to have closed the issue.