Adding/removing class to accordion widget

Question

Please do not throw stones at me - I am not a pro and I was trying to resolve it by reading documentation, but at the moment - stuck. I have accordion widget where every accordion panel (tab) is a text of question and the accordion content - user's response via radio buttons. There are 4 choices to respond to the question: Yes, No, NS and NA. For "N" response - accordion panel should change the background colour to "A", otherwise should change it to "B". If no response is given = should remain default. Now, simple as it looks, I am trying to play with AddClass option in jQuery and yet still have not been able to make it work)))) The problem is that accordion background is controlled by this css line (from downloaded css of jQuery):

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #d3d3d3;
    background: *#e6e6e6*;
    font-weight: normal;
    color: #555555;
}

What I do not understand is how to achieve change of background parameter WITHIN this css? If I remove ui.widget classes and substitute it with something different - it does not work correctly. If I just create a new class, say "test", apply background to it and run it by below JS - it does not work as expected (it will change background of the text only, not the entire panel, as I understand because accordion panel has a specific area called ui.accordion-header)

Please see my jsfiddle (CHAPTER 4!) http://jsfiddle.net/PatrickObrian/b3A7a/27/

Apparently, this was JS to AddClass/RemoveClass

jQuery(function () {
 $('input[type=radio][name=Radio401]').change(function () {
     if (this.value == 'Y') {
         $('.QTable').removeClass('ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default').addClass(".ui-accordion-header");
     } else if (this.value == 'N') {
         $('.QTable').removeClass('.ui-accordion-header').addClass("ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default");
     }
 })
})

So here I am))))

Answer 1

removeClass and addClass are written without points. Multiple classes are separated by space. See here: https://api.jquery.com/removeClass/

You can try this:

jQuery(function () {
$('input[type=radio][name=Radio401]').change(function () {
     if (this.value == 'Y') {
         $('.QTable').removeClass('ui-state-default ui-widget-content ui-widget-header').addClass("ui-accordion-header");
     } else if (this.value == 'N') {
         $('.QTable').removeClass('ui-accordion-header').addClass("ui-state-default ui-widget-content ui-widget-header");
     }
 })
})

Answer 2

If changing your background color is your final moto, I would suggest:

jQuery(function () {
 $('input[type=radio][name=Radio401]').change(function () {
     if (this.value == 'Y') {
         $('.QTable').css("background-color", "green");
     } else if (this.value == 'N') {
         $('.QTable').css("background-color", "red");
     }
 });
});  

Using this you would not have to worry about the css class because the above code creates an inline css whose priority is higher then external css...
Hopefully it helps.