Hide reveal.js fragments after their appearance

Question

Say I have a simple reveal.js slide like this:

<section>
  <h2 class="fragment" data-fragment-index="1">first</h2>
  <h2 class="fragment" data-fragment-index="2">second</h2>
  <h2 class="fragment" data-fragment-index="1">first</h2>
</section>

I want the two "first" to be shown only in fragment 1 and then go back hidden in fragment 2, when "second" appears. How should I do that?

Answer 1

The current-visible class is what you're looking for, see the doc on fragments: https://github.com/hakimel/reveal.js/#fragments

For a demonstration of this class, see the general reveal.js demo: http://lab.hakim.se/reveal-js/#/20/1

Answer 2

If you want to completely remove the space taken by the hidden element after it was shown, you can use the following CSS selector and properties:

.fragment.current-visible.visible:not(.current-fragment) {
    display: none;
    height:0px;
    line-height: 0px;
    font-size: 0px;
}

Additionally if you don't want this behavior for other current-visible fragments, you can just add a custom class to your selector and HTML elements.

Answer 3

One could also use this solution :

.reveal .slides section .fragment {
    opacity: 0;
    display: none; }
.reveal .slides section .fragment.current-fragment {
    opacity: 1;
    display: inline; }