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))))