how to change class of an element by click - CSS-Tricks

This topic is empty.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

Posts
October 22, 2016 at 10:27 am #246910

Funkaholik
Participant

Hi there
in this exampe
you can add class .blue to a bloc by thirst click
but how change it to .red by second click?
it’s so simple but i can’t figure this out

with pure javascript it’ll be even more cool!

October 22, 2016 at 11:10 am #246911

Shikkediel
Participant

This’ll loop over the colours in the array tones:

Demo

Edit – if you’ll be changing the colour many times, setting inline style’s probably more convenient (more efficient) than adding and removing classes. Particularly with vanilla JS.

if count is larger than length of array use modulus to return to beginning

That’s the comment I added to the code. But just to not further complicate things. It’s actually not really the case – an array is zero indexed (first element is number 0). So the count of current is as large as the length of the array but that’s one more than the maximum indexed number. I’m horrible at explaining.

October 22, 2016 at 12:01 pm #246912

Shikkediel
Participant

This is the more basic approach of what you asked about:

Link

It’ll only work if the element doesn’t have any other classes though because they would be removed in the current form… that’s a lot easier with jQuery.

October 22, 2016 at 12:03 pm #246913

Funkaholik
Participant

thanx Shik man
but i really want to add a different class to an element by click,
and then bring back the prevous class by second click
so it’s like a toggle between classes
it’s not about colors))

October 22, 2016 at 12:05 pm #246914

Shikkediel
Participant

Yeah, my coding frenzy of late is shooting past the target. Lol. A simple toggle sounds doable. I’ll add an example to this post later on.

Slightly broader approach

October 23, 2016 at 7:46 am #246938

Funkaholik
Participant

Actually i didn’t find any workin’ jquery method to toggle between classes((
if you can provide one here it’ll be great.

October 23, 2016 at 8:25 am #246943

Beverleyh
Participant

I found this in my archived code samples. Looks like it does what you want http://fofwebdesign.co.uk/template/_testing/misc/change-class.htm

The element that has its class toggled in the demo starts without any class being set (so you see it in a totally unstyled state to begin with) but you can give it one so that the alternate toggle looks more obvious.

October 23, 2016 at 10:10 am #246944

ershwetabansal
Participant

Hey,

See if this helps you
http://codepen.io/ershwetabansal/pen/QKYgjy

October 23, 2016 at 11:48 am #246947

Shikkediel
Participant

Using className with vanilla JS is a lot nicer. :-)
It can be very straightforward with jQuery too:

Demo

November 2, 2016 at 3:17 am #247293

Funkaholik
Participant

Maaan i gotta learn js .. got to force myself to do it because
i’m marking time for too long instead of making things beautiful=))

thanx for all of you guys who’s helped but i found a very few workin best for me

that one is supa clean i like it

but these two first and second are doing exactly what i need

button clicked = class of another element gets toggled
but how to add more classes?

November 2, 2016 at 12:34 pm #247333

Shikkediel
Participant

button clicked = class of another element gets toggled
but how to add more classes?

Which pen are you referring to, Beverleyh’s code?

November 2, 2016 at 1:00 pm #247335

Funkaholik
Participant

i like yours because it’s clean and a bit more readeable and understandable
but i need a trigger to change multiple classes of any element (maybe even in a specific order)
which you haven’t coded here

November 2, 2016 at 2:35 pm #247339

Shikkediel
Participant

It does actually trigger these multiple classes but because they have the same property (background), the last one in the style overrides any previous classes. You’ll notice it turns blue if you switch heir places in the order of the css. So if you add several classes with different properties, they’ll all apply (and toggle). On the other hand, using the current JS it’s not possible the influence the order of the classes applied – the style itself is determining it.

November 4, 2016 at 3:55 pm #247507

Funkaholik
Participant

nope it doesn’t .. if you have more then 2 classes like here

November 4, 2016 at 4:10 pm #247508

Shikkediel
Participant

It does but you don’t notice it when all the properties are changing the background…

Using different properties
Author

Posts

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

The forum ‘JavaScript’ is closed to new topics and replies.