First, create an array to define the classes you’re targeting and the add-on classes. An array is a list! We're listing our add-on classes and where they will go.
Then run the function below the array!
Paste before </body> tag of the page you're working with.
The variable we created to store our Library instance. The name of the variable can be set to whatever you want.
A variable we established to store our array. This is variable holds all of our add-on classes and where they should be added. You can name this variable anything you want.
The class of the element that you want to add a new class to. If you want to add the ~.cool~ class to ~.not-cool~, ~.not-cool~ would be your class target.
The class that you want to add to your ~classTarget~. In our example in ~classTarget~, the ~classToAdd~ would be ~.cool~.
Where we use our variable that holds array we created. In the example, this would be ~flipSection~.
The frequency of the classes being added to the list
Specify when the classes start being added to the Collection List.
You may customize when in the Collection List the addclasses component starts adding classes, as well as customize the iteration which classes are added to the Collection List (add a class to every nth child). This is why we have frequency and start.
Here is a handy visual explanation to the frequency and start options. In the following examples we are adding the class that changes item's background to solid with the designated frequency and starting place.
Remember to create a 'setup' page with the Add Classes .combo-class added to an element.
This is so you don't accidentally delete the .combo-class when you "clean up all unused styles" from the Style Manager.