O .accordion()
tem dois eventos chamados beforeActivate
e create
utilizei os dois eventos para maniputarmanipular o cabeçalho, e para removeremover os icones utilizei o option icons
.
No beforeActive
os cabeçalhos são ui.newHeader
para o elemento que acabou de ser ativado e ui.oldHeader
para o elemento que acabou de ser desativado.
No create
o cabeçalho é o ui.header
que retornará o elemento ativo do cabeçalho assim que o .accordion()
for criado.
O resultado do código foi esse:
$(function() {
$("#accordion").accordion({
icons: null,
beforeActivate: function( event, ui ) {
$("#" + ui.newHeader.attr("id")).children(".seta-btn-sub").toggleClass("active");
$("#" + ui.oldHeader.attr("id")).children(".seta-btn-sub").toggleClass("active");
},
create: function( event, ui ) {
$("#" + ui.header.attr("id")).children(".seta-btn-sub").toggleClass("active");
}
});
});
Para fazer os teste com background utilizei este css:
.seta-btn-sub {
background: red;
padding: 10px;
float:left;
border-radius: 7px;
}
.seta-btn-sub.active{
background: #00FF00;
}
Dessa forma você vai poder inserir este código e colocar o css para exibir o que precisar.