Select Page

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.

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

See the Pen xgwdLj by Alex (@visualbean) on CodePen.0

Advanced panel example fiddle

See the Pen NdGgrg by Alex (@visualbean) on CodePen.0

Full credits to Aupajo