jquery – cycle through classes on click

Imagine this

we have a nice little bootstrap panel, or maybe a few of them…
ermahgerd bootstrap
now let’s imagine that we’d like to change the width of the panel according to bootstrap standards.
you would do this by changing the col-* to something else.
One thing we could do is to use jquery’s toggleClass function.
https://gist.github.com/VisualBean/259551fdbc6c7d9193733cebc5d10fff
the above basically just switches between 2 classes (and ONLY 2 classes)
What if we want to cycle through say col-lg-4 then col-lg-8 then col-lg-12?
I started googling a bit and fell upon the following answer on stackoverflow.
What this basically does is get the current class from the array of cyclable classes then pick the next item in the array or the first. Usage:
Basic example
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”xgwdLj” default_tab=”js,result” user=”visualbean”]See the Pen xgwdLj by Alex (@visualbean) on CodePen.[/codepen_embed]
Advanced panel example fiddle [codepen_embed height=”265″ theme_id=”0″ slug_hash=”NdGgrg” default_tab=”html,result” user=”visualbean”]See the Pen NdGgrg by Alex (@visualbean) on CodePen.[/codepen_embed]
Full credits to Aupajo