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?
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');