How can I target a class or multiple SVG's on 1 page?

Any examples of this? I read that you can target an ID or object but don’t quite understand how to do that. When I try it with ID it only does the first one and then stops. This is my attempt at trying to get it to do class.

       jQuery(function () {
         var myCallback;
         var myElement = document.getElementsByClassName("icon-vivus");
         new Vivus(myElement, {duration: 50, type: 'async' }, myCallback);
      });

[maxwellito]

Back on my computer, I can write a snippet 😃

jQuery(function () {
  // Define your callback
  var myCallback = function () {};

  // Get your HTMLCollection of SVG to animate
  var myElements = document.getElementsByClassName("icon-vivus");

  // Go across them to create a Vivus instance
  // with each of them
  for (var i = myElement.length - 1; i >= 0; i--) {
    new Vivus(myElements[i], {duration: 50, type: 'async' }, myCallback);
  }
});

[maxwellito]

Sorry for the delay, xmas and stuff… Well played for finding a solution yourself. I’m just scared about optimization if a second click is triggered. Because it will recreate objects and reload SVG… it’s consuming a lot. What I recommend you is to create objects first, then play it when needed.

jQuery(document).ready(function() {
  var i,
    myVivusItems = [],
    myElementsVivusClick = document.getElementsByClassName("icon-vivus-click");

  // Go across them to create a Vivus instance
  // with each of them
  for (i = myElementsVivusClick.length - 1; i >= 0; i--) {
    myVivusItems.push(new Vivus(myElementsVivusClick[i], {duration: 50, type: 'async', start: 'manual'}));
  }

  // vivus svg animations on click
  document.getElementById("icon-collapse").addEventListener('click', function () {
    for (i = myVivusItems.length - 1; i >= 0; i--) {
      myVivusItems[i].reset().play();
    }
  });
});

I hope it’s clear, I’m bad to explain things sometimes. 😃