Reset default CSS from jQuery

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?

Dunhamzzz · Accepted Answer · 2012-08-31 08:40:19Z

3

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

answered Aug 31, 2012 at 8:40

Dunhamzzz

14.8k4 gold badges54 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cbourn Over a year ago

I appreciate your answer, however toggleClass is not producing an effect on the image width (span). I do not want to remove the class, I just want to be able to revert back to the "original" hardcoded class from the HTML.

webstrap Over a year ago

have you checked if the styles of span12 are active afterwards? you could try using column-span:all !important;

Dunhamzzz Over a year ago

I get the feeling that changing the class to one of the boot-strap classes is not the way to go, you should create a new CSS class li.expanded with img.expanded with specific rules and then toggle that class, that way you won't be messing around with the classes that are fundamental to the pages layout.

cbourn Over a year ago

I'll create a new CSS class and toggle it. Good idea.

webstrap · Accepted Answer · 2012-08-31 09:09:14Z

2

are you requiring a class for that? if the previous answer does not work you can try

$(this).css('column-span','all');

and to remove it either if you have no locale style attribute

$(this).removeAttr( 'style' );

or otherwise

$(this).css('column-span','');

answered Aug 31, 2012 at 9:09

webstrap

1,0541 gold badge10 silver badges25 bronze badges

Collectives™ on Stack Overflow

Reset default CSS from jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related