javascript - panel header change colour on click of button -

i have button changes colour of site, (text etc etc) i'm wanting change background colour of panel header.

currently button works on afo. heres stylesheet it

.afo { background-color: #fff;} .afo h1 { color: #00159d; } .afo h2 { color: #00159d; } .afo h3 { color: #00159d; } .afo h4 { color: #00159d; } .afo h5 { color: #00159d; } .afo h6 { color: #00159d; } .afo p { color: #00159d; } .afo th { background-color: #c3cced; color: #00159d;} .afo panel-header { background-image:-webkit-linear-gradient(top, #c3cced, #00159d ) !important; color: #00159d !important;} 

the html <div class="panel-heading orange ct-orange" ng-class="colorscheme">details</div>

i have button working, i'd show javascript cant find :(

when inspect element afo gets added onto end of class, quite persistant in staying orange (its original colour)

so far, way have been able change panel colour via changing top line in css .afo { background-color: #fff; background-image:-webkit-linear-gradient(top, #c3cced, #00159d ) !important; color: #00159d !important;}

any ideas great! let me know if needing something, i'll continue search button!!!

found js

    $(function() {   $(".colorselect").change(function() {     $("body").attr('class', '');     $(".colorselect").each(function() {       $("body").addclass($(this).val());     });   }); }); 

you didn't add . target class element

from

.afo panel-header { background-image:-webkit-linear-gradient(top, #c3cced, #00159d ) !important; color: #00159d !important;} 

to

.afo .panel-header { background-image:-webkit-linear-gradient(top, #c3cced, #00159d ) !important; color: #00159d !important;} 

update

since afo being added on element use .afo.panel-header without space instead of .afo .panel-header.

.afo.panel-header { background-image:-webkit-linear-gradient(top, #c3cced, #00159d ) !important; color: #00159d !important;} 

update

name of class panel-heading , not panel-header

your css should have instead:

.afo.panel-heading { background-image:-webkit-linear-gradient(top, #c3cced, #00159d ) !important; color: #00159d !important;} 

fiddle