Reusing area of Reveal.js slide (replace fragment, in place)

Question

I am trying to reuse a region of a Reveal.js HTML slide, such that when you first enter a slide, a title and some introductory text (Lorem ...) is present.

<TITLE>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

On successive right-arrow clicks this appears Foo and it's contents would appear, one line at a time:

<TITLE>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Foo
 • apple
 • banana
 • cake

Once I have cycle through the above, I want to this "Bar" subsection to replace the "Foo" region of the slide (screen).

<TITLE>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bar
 • donut
 • eggs
 • fish

The issues (see animated image, below) are

I can't seem to fade "Foo" then proceed to "Bar";
The content on the slide is stacked, i.e. "Bar" appears under the "Foo" region of the slide.

<section>
  <h1>My title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>

  <span class="fragment fade-out">
    <h3 class="fragment" data-fragment-index="0">Foo</h3>
    <ul>
      <span class="r-stack">
        <p class="fragment current-visible" data-fragment-index="1">• Apple </p>
        <p class="fragment current-visible" data-fragment-index="2">• Banana </p>
        <p class="fragment current-visible" data-fragment-index="3">• Cake </p>
      </span>
    </ul>
  </span>

  <span class="fragment fade-out">
    <h3 class="fragment" data-fragment-index="4">Bar</h3>
    <ul>
      <span class="r-stack">
        <p class="fragment current-visible" data-fragment-index="5">• Donut </p>
        <p class="fragment current-visible" data-fragment-index="6">• Eggs </p>
        <p class="fragment current-visible" data-fragment-index="7">• Fish </p>
      </span>
    </ul>
  </span>
</section>

score 0 · Answer 1 · edited May 05 '23 at 20:24

A solution at the bottom. But first, let me explain.

To make the first part:

Foo
 • apple
 • banana
 • cake

appear one line at a time, you have to remove r-stack. r-stack is putting things on top of each other.

For the "Bar" part to replace the previous content it has to be on a separate slide - it has to be in a separate <section>. (Maybe there are also other ways, I'm not sure.)

One problem in the code is to use current-visible. This is a class that Reveal.JS uses for its own purposes, it's better to not touch it.

One last point to note is that there is a list (<ul>) but not use list items (<li>) in it. This is not causing any issue though.

Overall, the below works and is much simpler.

<section data-transition="fade-out">
    <h3>Foo</h3>
    <ul>
        <li class="fragment">Apple </li>
        <li class="fragment">Banana </li>
        <li class="fragment">Cake </li>
    </ul>
</section>
<section data-transition="fade-in">
    <h3>Bar</h3>
    <ul>
        <li class="fragment">Donut </li>
        <li class="fragment">Eggs </li>
        <li class="fragment">Fish </li>
    </ul>
</section>

This answer works - appreciated - but does not achieve what I want (I edited / clarified my question). — Victoria Stuart, May 05 '23 at 20:32

Victoria Stuart · Accepted Answer · 2023-06-01T15:47:56.767

OK after much testing I managed a solution.

Notes

Per StackOverflow How to overlay one div over another div I stack elements to get the Reveal.js r-stack to reuse that part of the slide.
I include CSS styles for left-aligned content.
Custom bullets and headings (<h1>) - other than default Reveal.js styles can be difficult / problematic. For simplicity I tend to hard-code UTF-8 bullets • , and use CSS to accomplish custom header text (size; weight; ... - e.g. "fsh4", i.e. "font style h4", below).
I am a Reveal.js novice; in my use case, I couldn't see a way to have the "Foo" fragment fade in, then fade out when not needed. My clumsy solution was to reiterate these headers for each of the child content lines ("bullets"), pushing the latter down via CSS.
Animated GIF illustrating the final solution appended (sorry - not aware of a JSFiddle-like playground for Reveal.js).

HTML

<section>
  <h3>Some foods</h3>

  <!-- https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div -->
  <div id="container">
    <div class="position_left">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

      <div id="subcontainer_1">
        <span class="r-stack">
          <p class="fragment current-visible" data-fragment-index="0"><span id=fsh4>Foo</span></p>
          <p class="fragment current-visible" data-fragment-index="1"><span id=fsh4>Foo</span></p>
          <p class="fragment current-visible" data-fragment-index="2"><span id=fsh4>Foo</span></p>
          <p id="nup3ooth" class="fragment current-visible" data-fragment-index="1">• Apple </p>
          <p id="nup3ooth" class="fragment current-visible" data-fragment-index="2">• Banana </p>
        </span>
      </div>

      <div id="subcontainer_2">
        <span class="r-stack">
          <p class="fragment current-visible" data-fragment-index="3"><span id=fsh4>Bar</span></p>
          <p class="fragment current-visible" data-fragment-index="4"><span id=fsh4>Bar</span></p>
          <p class="fragment current-visible" data-fragment-index="5"><span id=fsh4>Bar</span></p>
          <p id="nup3ooth" class="fragment current-visible" data-fragment-index="4">• Cake </p>
          <p id="nup3ooth" class="fragment current-visible" data-fragment-index="5">• Donut </p>
        </span>
      </div>

    </div>
  </div>
</section>

CSS

<style>
  /* ---------------------------------------- */
  /* POSITION LEFT                            */
  /* https://github.com/hakimel/reveal.js/issues/1897 */

  .reveal .position_left {
    text-align: left;
  }

  .reveal .position_left p {
    margin: 1.0rem 1.0rem 1.0rem 0.5rem;
    font-size: 1.0rem;
  }
  /* ---------------------------------------- */

  /* ---------------------------------------- */
  /* CONTAINER DIV                            */
  /* https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div */
  #container {
    position: relative;
  }

  #subcontainer_1 {
    width: 100%;
    position: absolute;
  }

  #subcontainer_2 {
    width: 100%;
    position: absolute;
  }
  /* ---------------------------------------- */

  /* ---------------------------------------- */
  /* FONT STYLES                              */

  /* Push the "bullets" down" (order top right bottom left): */
  #nup3ooth {
    padding: 2.0rem 0.0rem 0.0rem 1.0rem;
  }

  /* Note: no space following "span": */
  span#fsh4 {
    font-size: 1.25rem;
    margin: 0.0rem 0.0rem 0.0rem 0.0rem;
  }
  /* ---------------------------------------- */
</style>

Effect

ADDENDUM (2023-06-01)

Alternate, simpler solution to replacing fragment (in place).

      <section></section>
      <!-- Note: custom CSS. -->
      <section>
        <div id="h1">Replace text fragment (in place)</div>
        <div class="position_left">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <p class="fragment current-visible fade-up">(*** THIS WILL BE REPLACED WITH FOLLOWING 2 FRAGMENTS ***)</p>
          <p class="fragment current-visible fade-up">Suspendisse efficitur pulvinar elementum.</p>
          <p class="fragment">Vestibulum a est eu erat rutrum scelerisque non et diam.</p>
          <p class="fragment">Nam ut fringilla enim.</p>
        </div>
      </section>
      <section></section>

Effect

Reusing area of Reveal.js slide (replace fragment, in place)

2 Answers2