change .css class with jquery

Question

I have this slidetoggle and I want the style of the open toggle to be different then the closed ones.

By default all the faqtopics1 are set to border-radius: 5px; background-color: #f2ecec; when the div faqtext associated opens.

When the toggle opens, I want the style of faqtopics1 to be set to the "OnClick Style"

border-radius: 5px 5px 0 0;
background-color: #dedcdc;

I found out about the .css() Method and could somehow make something up (line 2 and 3):

   $(".faqtopics1").click(function(event) {
        $("div.faqtopics1").css({"border-radius":"5px", "background-color":"#f2ecec"});
        $(this).css({"border-radius":"5px 5px 0 0", "background-color":"#dedcdc"});
        $("div.faqtext").stop(true).slideUp(400);
        $(this).next("div.faqtext").stop(true).slideToggle();
    });

But it's not a total success as even when I re-click on a toggle to close it, the OnClick style remains. Is there a better way to make what I want ?

Also I want to apply the same principal even if I click on faqtopics2, faqtopics3 or faqtopics4 div. (cf the jsfiddle).

You can find my codes (css + query) on this jsfiddle

Thanks a lot for your help!

Martin · Accepted Answer · 2014-06-24 13:37:52Z

2

Something much easier:

Define your two states in CSS:

faqtopics1 {
  border-radius: 5px; 
  background-color: #f2ecec;
}

.onclickstyle {
  border-radius: 5px 5px 0 0;
  background-color: #dedcdc;
}

Then in JS you just have to toogle the class:

$("div.faqtopics1").toggleClass("onclickstyle");

This means you have a clear separation between the exact style (in the css), and the dynamic toogle (in the javascript).

answered Jun 24, 2014 at 13:37

Martin

7,7531 gold badge23 silver badges24 bronze badges

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

Comments

livinzlife · Accepted Answer · 2014-06-24 13:36:21Z

1

It may be easier to use addClass.

$this.addClass('active');

Then in your css

.faqtopics.active{border-radius:5px 5px 0 0; background-color:#dedcdc;}

You can give all of your "FAQ topics" a shared class .faqtopics and then unique id's #faqtopic1 #faqtopic2 if you need to style them a bit differently.

answered Jun 24, 2014 at 13:36

livinzlife

8733 gold badges18 silver badges33 bronze badges

Comments

Rajaprabhu Aravindasamy · Accepted Answer · 2014-06-24 13:50:51Z

1

try this,

$('faqtopics1').attr('class','newClassName');

edited Jun 24, 2014 at 13:50

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

answered Jun 24, 2014 at 13:34

user3122094

2411 gold badge2 silver badges15 bronze badges

1 Comment

user3122094 Over a year ago

That will remove the old class and add a new one. So just make sure you have the classes defined in your css file.

Collectives™ on Stack Overflow

change .css class with jquery

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related