Fragment index bound to specific ID or classes

[cgadal]

Hello,

I have a RevealJS slide with a lot of elements dispersed across the slide, that I would like to make appear at three different times.

Right now, I can write for each element the right fragment, but that is very long to do, and results in a very unreadable code as there are a lot of elements.

Fortunately, the required fragment index also corresponds to existing classes.

Is there a way to bind the fragment index to a specific class?

For example, I'd like all div.class1 to appear with a fragment-index 1.

Thanks!

[liferays]

you can use JavaScript to dynamically assign the fragment-index based on the class of each element , this will make your slide code cleaner

let s give it a try:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Function to set fragment indices based on class
    function setFragmentIndices() {
      // Define class to index mappings
      const classToIndex = {
        'class1': 1,
        'class2': 2,
        'class3': 3
        // Add more mappings as needed
      };

      // Iterate over each class-index pair
      Object.keys(classToIndex).forEach(className => {
        // Select all elements with the current class
        document.querySelectorAll('.' + className).forEach(element => {
          // Set the fragment index
          element.classList.add('fragment');
          element.setAttribute('data-fragment-index', classToIndex[className]);
        });
      });
    }

    // Call the function to set fragment indices
    setFragmentIndices();
  });
</script>

place this script before closing tag of your HTML file, or include it in your JavaScript files loaded at the end of the document. Make sure it runs after the RevealJS library has been initialized to ensure proper functionality.
ensure that each of your divs or elements has the appropriate class assigned (class1, class2, etc.