Exporting Org file to Html with collapsable headings

Exporting Org file to Html with collapsable headings

[ZIPING CHEN]

[-- Attachment #1: Type: text/plain, Size: 744 bytes --]

Hi,

I am working on a large org file with exceptional number of subheadings. For example, I may have org headings inside headings up to 20 or 30 layers deep.

I may have many things like this in the middle of the file.
************************** a new heading.

When I export the file to html, I like to export in such a way that the org headings become collapsable headline in html (toggle switch). I spend some time search the web, and find a theme called bigblow which does something close to what I want, but not exactly. It provide limited layer of toggle switch only. I wish to turn all layers of headings in org file into collapsable headline to html. 

Does anybody know a way I can accomplish this?

Thanks a lot.

Ziping

[-- Attachment #2: Type: text/html, Size: 1267 bytes --]

Re: Exporting Org file to Html with collapsable headings

[Juan Manuel Macías]

ZIPING CHEN writes:

> I am working on a large org file with exceptional number of
> subheadings. For example, I may have org headings inside headings up
> to 20 or 30 layers deep.
>
> I may have many things like this in the middle of the file.
> ************************** a new heading.
>
> When I export the file to html, I like to export in such a way that
> the org headings become collapsable headline in html (toggle switch).
> I spend some time search the web, and find a theme called bigblow
> which does something close to what I want, but not exactly. It provide
> limited layer of toggle switch only. I wish to turn all layers of
> headings in org file into collapsable headline to html. 
>
> Does anybody know a way I can accomplish this?

I think that you need to add javascript and enclose the collapsible
content in a div. If you google for 'html collapsible sections' there is
quite a bit of information on how to achieve this from the html side.
Here, for example:

https://levelup.gitconnected.com/collapsible-sections-with-or-without-javascript-3fd871955a9d

On the other hand, although not exactly related to what you are looking
for, you may be interested in taking a look at 'organize'. I have not
tried it, and as far as i know, it has its limitations:

https://github.com/200ok-ch/organice

Best regards,

Juan Manuel 

Re: Exporting Org file to Html with collapsable headings

[Max Nikulin]

On 21/01/2022 19:23, Juan Manuel Macías wrote:
> ZIPING CHEN writes:
> 
>> I may have many things like this in the middle of the file.
>> ************************** a new heading.
>>
>> I wish to turn all layers of
>> headings in org file into collapsable headline to html.
>>
>> Does anybody know a way I can accomplish this?
> 
> I think that you need to add javascript and enclose the collapsible
> content in a div. 

Have a look at info "(org) JavaScript support" 
https://orgmode.org/manual/JavaScript-support.html (I have not tried 
that folding view).

HTML has <details><summary>header</summary>body</details> elements that 
works without JS, but it will require custom exporter.

You should ensure that deep headings can not be recognized as org inline 
tasks. Check ox-html, it may has limit on number of levels that are 
exported as headings with switching to lists for deeper structures.

Re: Exporting Org file to Html with collapsable headings

[xincheng99]

[-- Attachment #1: Type: text/plain, Size: 1404 bytes --]

Thanks a lot. This is very close to what I am looking for, and saves a lot of my time. I am grateful to all the help I received from this mailing list.

It is a lot of fun subscribing to this list.

Regards

Ziping

> On Jan 21, 2022, at 11:46 AM, Max Nikulin <manikulin_at_gmail_com_fcq2724cv3y0tc_re5x9491@icloud.com <mailto:manikulin_at_gmail_com_fcq2724cv3y0tc_re5x9491@icloud.com>> wrote:
> 
> On 21/01/2022 19:23, Juan Manuel Macías wrote:
>> ZIPING CHEN writes:
>>> I may have many things like this in the middle of the file.
>>> ************************** a new heading.
>>> 
>>> I wish to turn all layers of
>>> headings in org file into collapsable headline to html.
>>> 
>>> Does anybody know a way I can accomplish this?
>> I think that you need to add javascript and enclose the collapsible
>> content in a div. 
> 
> Have a look at info "(org) JavaScript support" https://orgmode.org/manual/JavaScript-support.html <https://orgmode.org/manual/JavaScript-support.html> (I have not tried that folding view).
> 
> HTML has <details><summary>header</summary>body</details> elements that works without JS, but it will require custom exporter.
> 
> You should ensure that deep headings can not be recognized as org inline tasks. Check ox-html, it may has limit on number of levels that are exported as headings with switching to lists for deeper structures.
> 
> 


[-- Attachment #2: Type: text/html, Size: 3360 bytes --]

Re: Exporting Org file to Html with collapsable headings

[Tim Cross]

ZIPING CHEN <ziping@mac.com> writes:

> Hi,
>
> I am working on a large org file with exceptional number of subheadings. For example, I may have org headings inside headings up
> to 20 or 30 layers deep.
>
> I may have many things like this in the middle of the file.
> ************************** a new heading.
>
> When I export the file to html, I like to export in such a way that the org headings become collapsable headline in html (toggle
> switch). I spend some time search the web, and find a theme called bigblow which does something close to what I want, but not
> exactly. It provide limited layer of toggle switch only. I wish to turn all layers of headings in org file into collapsable headline to
> html. 
>
> Does anybody know a way I can accomplish this?
>
> Thanks a lot.
>
> Ziping


The effect you are after can be achieved using either JS and CSS or with
just CSS. Most of the CSS frameworks out there will support this
functionality. For example

bootstrap - CSS and JS
bulma - CSS only
Tailwind - CSS only

I'm pretty sure all of the above support the ability to create a
minimised version which only includes the features you want. This can
help minimise unwanted interaction between different CSS style
definitions and reduce overall size.

Personally, I prefer bulma or tailwind over bootstrap as it avoids also
having to deal with javascript and having to bundle js code with your
final output.