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?
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.