Isotope Visual Layouts - jQuery toggleClass

Isotope Visual Layouts Pro plugin introduces a click to enlarge feature for box items that are part of the grid layout. This uses a cool jQuery element that changes the CSS class and refreshes the layout of the page.

It took me a bit to learn how to do this - only cause I’m not a frontend developer. But if you’d like to add toggleClass to your Isotope WordPress project, then you might like this.

Here is the code for toggleClass which needs to be part of the Isotope jQuery script.

Change size of clicked element container.delegate( 'li.box', 'click', function(){ $j(this).toggleClass('span3').toggleClass('span5'); container.isotope('reLayout'); });

The most interesting thing here is that you can link multiple toggleClass - kind of like adding one class and removing the other class

Meet the author

Damien Saunders
An experienced management consultant and business leader interested in digital transformation, product centred design and scaled agile. If I'm not writing about living with UCTD (an autoimmune disease), I'm probably listening to music, reading a book or learning more about wine.
Find our more about me.