Question

I am using a grid layout (Bootstrapper) to display images of a certain width in rows.

<li class="span4"><div id="id" class="thumbnail"><img src="**path**"><img></div></li>
<li class="span12"><div id="id-2" class="thumbnail"><img src="**path**"><img></div></li>
<li class="span3"><div id="id-3" class="thumbnail"><img src="**path**"><img></div></li>

I’d like to be able to make an image’s width span all columns (class=”span12″) when a user clicks on the image and to revert the image back to the “hardcoded” class of the image when the user clicks on the image again.

if (current_span != 'span12') // If image is not already spanning all columns ("span12")
{
$(this).attr('class','span12'); // Add class to span all columns
}

Using the above JS, images are displaying with the correct width after one click.

However, on the second click I’d like to revert back to the “hard-coded” class since not all images have the same class (i.e., some belong to ‘span3’, others to ‘span4’ and other to ‘span12’.

Is there a way to revert back to the “hardcoded” class from the HTML on the second click?

Answer 1

CSS classes will cascade, so the last one in the queue will overwrite any preceding ones. You should be able to simply toggle the “span12” class on/off with jQuery:

$(this).toggleClass('span12');