Hiding section titles in revealjs presentation

[nithinmkp]

Hello,
I have to hide section title slides in revealjs presentation. This can be done in beamer using section -titles: false
Is there a similar thing in revealjs presentation?

[cderv]

Can you share an example document where you want to hide section title ?

I want to confirm that I understand correctly what slides you want to hide. For example, you only get section slides if you use header with no content, so you can hide them by using only header and content

• No section slide

---
title: test
format: revealjs
---

## Slide 1

Content

## Slide 2

Content

• With section slides

---
title: test
format: revealjs
---

# Section 1

## Slide 1

Content

# Section 2

## Slide 2

Content

[aborruso]

Can you share an example document where you want to hide section title ?

I think he wants a way to have a title in the slides TOC, but to hide that title in the slide

[cderv]

Oh I see. @nithinmkp can you confirm please ?

[aborruso]

Oh I see. @nithinmkp can you confirm please ?

I know it, because I have read his tweet :)

https://twitter.com/nithinnithu_m/status/1518238387387322368?t=BcpMrn0jwGAT8JCXbFIONg&s=19

[nithinmkp]

yes. So as Andrea mentioned, I don't want a section title slide. But I want to include a section title so that it appears on toc. format: revealjs: theme: serif incremental: true slide-level: 3 toc: true toc-depth: 2 toc-title: Outline [image: Mailtrack] <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> Sender notified by Mailtrack <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> 04/25/22, 05:00:16 PM

…

On Mon, Apr 25, 2022 at 4:25 PM Christophe Dervieux < ***@***.***> wrote: Oh I see. @nithinmkp <https://github.com/nithinmkp> can you confirm please ? — Reply to this email directly, view it on GitHub <#721 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APQKHSZKBKVISE6HGVXIY3DVGZ22XANCNFSM5UGKJKDQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[cderv]

There is a feature to hide slide : https://quarto.org/docs/presentations/revealjs/advanced.html#slide-visibility
However, this will indeed remove it from the TOC completely as the TOC only contains showed slides.

There is no such feature of adding section in TOC but not showing them in presentation with revealjs. Maybe some CSS (or/and JS) can help with that, but I don't have the answer straight away. This would be a revealjs how-to to look into 🤔

[cderv]

Just adding in case it is helpful, a workaround that revealjs support vertical slides, meaning all section slides are at the same level, and content slide nested below. With navigation-mode: grid you can navigate at the nested level only, skipping section slide when presenting. Exampe:

---
title: test
format:
  revealjs:
    theme: serif
    incremental: true
    toc: true
    toc-depth: 2
    toc-title: Outline
    navigation-mode: grid
---

# Section 1 

## Slide 1

Content

# Section 2 

## Slide 2

Content

When on Slide 1, clicking the right arrow key for next slide jump directly to Slide 2, skipping the section.

[cderv]

Here is a JS script that you can add to your presentation which is using Reveal JS event hooks and API

Put this in a file skip-section.html

<script>
  Reveal.on( 'slidechanged', event => {
    if (event.currentSlide.id.includes("section")) {
      var prev_ind = Reveal.getIndices(event.previousSlide)
      var cur_ind = Reveal.getIndices(event.currentSlide)
      if (cur_ind.h <= prev_ind.h) {
        Reveal.prev()
      } else {
        Reveal.next()
      }
    }
} );
</script>

and use include-after-body to insert it at the end of the document.

---
title: test
format:
  revealjs:
    theme: serif
    incremental: true
    toc: true
    toc-depth: 2
    toc-title: Outline
    include-after-body: skip-section.html
---

# Section 1 

## Slide 1

Content

# Section 2 

## Slide 2

Content

This should behave as you expect: Section slide won't be show as part of the navigation but still there in TOC and overview

What it does:

• Each time you are changing slide (Reveal.on( 'slidechanged',) , it will check to current slide id
• For section slides, which have id section-n (if (event.currentSlide.id.includes("section")) {), we get the position of currentSlide and previousSlide to know which way we are navigating.
• If previous slide is before, then jump to the next slide (which is no more a section) (Reveal.next())
• If previous slide is after, then jump to the previous slide (which is no more a section) (Reveal.prev())

Does it behave as you would like to be ?

[nithinmkp]

This works for me. But when I use slide level: 3 , it doesnt work. I actually need slide level 3 to make use of sections and sub sections Nevertheless, This is quite helpful. But being novice in JS i cannot improve it too Thanks and regards Nithin [image: Mailtrack] <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> Sender notified by Mailtrack <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> 04/25/22, 07:29:12 PM

…

On Mon, Apr 25, 2022 at 6:19 PM Christophe Dervieux < ***@***.***> wrote: Here is a JS script that you can add to your presentation which is using Reveal JS event hooks and API Put this in a file skip-section.html <script> Reveal.on( 'slidechanged', event => { if (event.currentSlide.id.includes("section")) { var prev_ind = Reveal.getIndices(event.previousSlide) var cur_ind = Reveal.getIndices(event.currentSlide) if (cur_ind.h <= prev_ind.h) { Reveal.prev() } else { Reveal.next() } }} );</script> and use include-after-body to insert it at the end of the document. ---title: testformat: revealjs: theme: serif incremental: true toc: true toc-depth: 2 toc-title: Outline include-after-body: skip-section.html--- # Section 1 ## Slide 1 Content # Section 2 ## Slide 2 Content This should behave as you expect. What it does: - Each time you are changing slide (Reveal.on( 'slidechanged',) , it will check to current slide id - For section slides, which have id section-n (if (event.currentSlide.id.includes("section")) {), we get the position of currentSlide and previousSlide to know which way we are navigating. - If previous slide is before, then jump to the next slide (which is no more a section) (Reveal.next()) - If previous slide is after, then jump to the previous slide (which is no more a section) (Reveal.prev()) Does it behave as you would like to be ? — Reply to this email directly, view it on GitHub <#721 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APQKHS52GZDTNNHWCYU3SGLVG2IFNANCNFSM5UGKJKDQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[cderv]

But when I use slide level: 3 , it doesnt work.

What does not work ? you also want to hide sub-sections ? Having example would help when reporting some undesired behavior or asking for how-to.

Using this works as expected from my understanding

---
title: test
format:
  revealjs:
    theme: serif
    incremental: true
    toc: true
    toc-depth: 2
    slide-level: 3
    toc-title: Outline
    include-after-body: skip-section.html
---

# Section 1 

## Slide 1

### Content 1

Content

# Section 2 

## Slide 2

### Content 1

Content

Section 1 and Section 2 are skipped when navigating.

[nithinmkp]

I am sorry for not providing example. Based on this example I want section 1, slide 1 section 2 slide 2 to be skipped. [image: Mailtrack] <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> Sender notified by Mailtrack <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> 04/25/22, 08:36:52 PM

…

On Mon, Apr 25, 2022 at 8:11 PM Christophe Dervieux < ***@***.***> wrote: But when I use slide level: 3 , it doesnt work. What does not work ? you also want to hide sub-sections ? Having example would help when reporting some undesired behavior or asking for how-to. Using this works as expected from my understanding ---title: testformat: revealjs: theme: serif incremental: true toc: true toc-depth: 2 slide-level: 3 toc-title: Outline include-after-body: skip-section.html--- # Section 1 ## Slide 1 ### Content 1 Content # Section 2 ## Slide 2 ### Content 1 Content Section 1 and Section 2 are skipped when navigating. — Reply to this email directly, view it on GitHub <#721 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APQKHS4UVJTRCH6S5QZHS23VG2VHXANCNFSM5UGKJKDQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[nithinmkp]

--- title: "Macroeconomic Determinants of Remittances to India" format: revealjs: theme: serif incremental: true slide-level: 3 toc: true toc-depth: 2 toc-title: Outline colorlinks: false slide-number: c/t include-after-body: skip-section.html includes: in_header: "mathjax-equation-numbers.html" chalkboard: theme: whiteboard boardmarker-width: 5 buttons: false author: - Nithin M - Senior Research Fellow - Department of Humanities and Social Sciences - Indian Institute of Technology Kharagpur engine: knitr date: '`r format(Sys.Date(),"%B %d, %Y")`' bibliography: reference.bib csl: apa.csl --- # Introduction ## Background ### Background - India is the largest receiver of remittances - ample evidence on importance of remittances on CAD of India ## Motivation ### Motivation - significant contributor to the development of many emerging economies - substantial role in developing economies - often exceeds other foreign inflows even in periods of economic slumps - less volatile source of inflow but with the above doc structure, even Level 1 heading is not skipped [image: Mailtrack] <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> Sender notified by Mailtrack <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> 04/25/22, 08:40:33 PM

…

On Mon, Apr 25, 2022 at 8:37 PM Nithin .M ***@***.***> wrote: I am sorry for not providing example. Based on this example I want section 1, slide 1 section 2 slide 2 to be skipped. [image: Mailtrack] <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> Sender notified by Mailtrack <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> 04/25/22, 08:36:52 PM On Mon, Apr 25, 2022 at 8:11 PM Christophe Dervieux < ***@***.***> wrote: > But when I use slide level: 3 , it doesnt work. > > What does not work ? you also want to hide sub-sections ? Having example > would help when reporting some undesired behavior or asking for how-to. > > Using this works as expected from my understanding > > ---title: testformat: > revealjs: > theme: serif > incremental: true > toc: true > toc-depth: 2 > slide-level: 3 > toc-title: Outline > include-after-body: skip-section.html--- > # Section 1 > ## Slide 1 > ### Content 1 > > Content > # Section 2 > ## Slide 2 > ### Content 1 > > Content > > Section 1 and Section 2 are skipped when navigating. > > — > Reply to this email directly, view it on GitHub > <#721 (reply in thread)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/APQKHS4UVJTRCH6S5QZHS23VG2VHXANCNFSM5UGKJKDQ> > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> >

[cderv]

Oh yeah sorry. I based my example of the fact that the slides you want to skip are all named "Section ". I'll try to offer something more generic for skipping all title slide

[cderv]

Here another script that would skip all Title Slide in the navigation (slide with class title-slide)

<script>
  Reveal.on( 'slidechanged', event => {
    if (event.currentSlide.className.includes("title-slide")) {
      var prev_ind = Reveal.getIndices(event.previousSlide)
      var cur_ind = Reveal.getIndices(event.currentSlide)
      if (cur_ind.h == prev_ind.h && cur_ind.v < prev_ind.v) {
        Reveal.prev()
      } else {
        Reveal.next()
      }
    }
} );
</script>

[tchevri]

this is awesome and works as desired. I was looking for this everywhere and glad someone had the same issue and you fixed it.
This said, I absolutely hate to ask dear C., but would you know how to handle the page numbering please? because this certainly skips the undesired title section slides, but the slide numbering also skips. So to be precise, you go from slide 1 to slide 4, for instance (1 is the title slide, 4, is your first level 3 slide, since level 1 and level 2 are being skipped but their count is not). Is this an easy fix for you, please, dear C.?
Avec tous mes remerciements anticipes, thomas

[cderv]

Did you consider making slides you want to hide uncounted in the first place ?
https://quarto.org/docs/presentations/revealjs/advanced.html#uncounted-slides

You could write a Lua filter to add the attributes to all the title slides.

[nithinmkp]

That solved the problem. Thanks a lot.. [image: Mailtrack] <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> Sender notified by Mailtrack <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> 04/25/22, 10:25:03 PM

…

On Mon, Apr 25, 2022 at 9:06 PM Christophe Dervieux < ***@***.***> wrote: Here another script that would skip all Title Slide in the navigation (slide with class title-slide) <script> Reveal.on( 'slidechanged', event => { if (event.currentSlide.className.includes("title-slide")) { var prev_ind = Reveal.getIndices(event.previousSlide) console.log(prev_ind) var cur_ind = Reveal.getIndices(event.currentSlide) console.log(cur_ind) if (cur_ind.h == prev_ind.h && cur_ind.v < prev_ind.v) { console.log("Previous") Reveal.prev() } else { console.log("Next") Reveal.next() } }} );</script> — Reply to this email directly, view it on GitHub <#721 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APQKHS2PUDAETPL6E7VWDM3VG23ZJANCNFSM5UGKJKDQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>