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!