Slideover

Collapsible content overlays for Quarto Revealjs

From the bottom, toggle manually

Yup, that’s it.

Enable collapsible overlays in Quarto Revealjs presentations:

format: 
  revealjs:
    revealjs-plugins: 
      - slideover

Usage example

::: {.slideover--b}
Slideover text.
:::

From the bottom, auto-collapse

Toggles the slideover after five seconds.

Add .auto-collapse to the slideover:

::: {.slideover--b .auto-collapse}
Slideover text that collapses after five seconds by default.
:::

Control the delay by suffixing seconds, like .auto-collapse-10:

::: {.slideover--b .auto-collapse-10}
Slideover text that auto-collapses after 10 seconds.
:::

From the
right, toggle
manually

This content slides over from the right side of the slide.

Usage example

::: {.slideover--r}
Slideover text.
:::

One for the lefties.

Content can also slide over from the left side, sinisterly.

Usage example

::: {.slideover--l}
Slideover text from the left.
:::

Yes, it’s OK to be sinister. Take it from someone who is left-handed and was forced to write with his right hand.

The idea that left is sinister comes from Latin, where sinister simply meant “left” but gradually took on meanings like “unlucky” or “evil”.

And from the top, too.

And, finally, content can also slide over from the top.

Usage example

::: {.slideover--t}
Slideover text from the top.
:::

Tips & tricks

• Slideover provides only limited styling support.
  For example, bolding and italics are supported.
• For better styling, use Tachyons Extension For Quarto.
• Headings have special meaning in Quarto Revealjs presentations and are NOT supported inside slideovers.

Mad science, it works.

Slide content over from the left, at a third of the size with .slideover--l .third.

Slide content over from the bottom, at three-quarters of the size.

You can use the size adjustments on any slideover type.

Usage example

::: {.slideover--b .three-quarters}
Slide content over from the bottom, at three-quarters of the size.
:::

Slide content over from the right, at half-size with .slideover--r .half.

Slide content over from the top, with the default width.

• Default width for left or right: 40%
• Default width for top or bottom: 80%

You can additionally include the following classes to decrease the default width of the slideovers, for modals with less content:

• .quarters — 3/4s or 75% of the default width.
• .half — 1/2s or 50% of the default width.
• .third — 1/3 or 33ish% of the default width.