Changing CSS on Click with JQuery

Question

http://jsfiddle.net/rusticblonde/zg4JG/26/

$( "#infodiv" ).click(function() {
   $( "#div2" ).slideToggle( "slow", function() {

 });
$("#infodiv").click(function() {
    $("#div2 #div1").css("webkit-filter", "none")
 });
});

Hi there,

ive done a fiddle where on click i want to on click display a box with information, and change the colour back to its original. I seem to have got the click box working, however it doesnt change back to its original colour.

I currently have this on hover, but want to not do it with css if i can.

Any ideas if i have missed a tag?

codingrose · Accepted Answer · 2014-01-02 13:15:43Z

2

Cross browser solution:

Make a class say transition and remove it on click.

JS:

$("#infodiv").click(function () {
    $("#div2").slideToggle("slow");
    $("#div1").toggleClass("transition");
});

HTML:

<div id="div1" class="transition">

DEMO here.

edited Jan 2, 2014 at 13:15

answered Jan 2, 2014 at 13:02

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

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

3 Comments

Kirsty Marks Over a year ago

Hi Hiral, thankyou very much for these, can it be done so on click again to put the filter back on? (bit like a hover effect)

Kirsty Marks Over a year ago

argh! it appears to transition really fast (ie. you know you can say how long something takes to change in CSS) can that not be done on the initial transition? Sorry for all the questions :)

codingrose Over a year ago

you can always increase the time. change 1s to 5s or required time.

Manish Jangir · Accepted Answer · 2014-01-02 13:01:09Z

2

It should be

$("#div2,#div1").css("webkit-filter", "none")

answered Jan 2, 2014 at 13:01

Manish Jangir

5,4576 gold badges49 silver badges79 bronze badges

Comments

codingrose · Accepted Answer · 2014-01-02 13:16:44Z

0

You have missed , in your jquery selector.

It should be :

$("#div2, #div1")

edited Jan 2, 2014 at 13:16

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

answered Jan 2, 2014 at 13:06

Shyam

7925 silver badges15 bronze badges

Collectives™ on Stack Overflow

Changing CSS on Click with JQuery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related