Preciso de uma ajuda com o seguinte problema, tenho o seguinte HTML, que faz parte de um acordion
<div id="accordion2">
<h3 class="btn-sub-main"><a>Banho</a><div class="seta-btn-sub"></div></h3>
<div id="outraDiv">
<ul>
<li><a href="#">condicionadores</a><span></span></li>
<li><a href="#">sabonetes</a><span></span></li>
<li><a href="#">shampoos</a><span></span></li>
<li><a href="#">outros</a><span></span></li>
</ul>
</div>
<h3 class="btn-sub-main"><a>Higiene Infantil</a><div class="seta-btn-sub"></div></h3>
<div id="outraDiv">
<ul>
<li><a href="#">condicionadores</a><span></span></li>
<li><a href="#">sabonetes</a><span></span></li>
</ul>
</div>
<h3 class="btn-sub-main"><a>Alimentação</a><div class="seta-btn-sub"></div></h3>
<div id="outraDiv">
<ul>
<li><a href="#">condicionadores</a><span></span></li>
<li><a href="#">outros</a><span></span></li>
</ul>
</div>
</div>
Tenho o seguinte código Javascript que altera o fundo da DIV="seta-btn-sub" (imagem de seta):
$(function() {
$("#accordion2").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");
}
});
});
Tentei de diversas formas fazer o que desejo baseado neste código, mas não consegui. Desejo que o h3 que tem a class "btn-sub-main" troque a cor do background quando o campo aria-hidden')=='true , ou que add uma class e por lá insiro as característica do CSS que desejo.
Abaixo outro script que existe neste accordion que me esconde/mostra a div="outraDiv", tentei usa-la juntando as duas de diversas formas mas não consegui.
controlaOutraDiv = function(selector){
$("#accordion2 h3", selector).bind('click',function(){
console.log($(this).next().attr('aria-hidden'));
if($(this).next().attr('aria-hidden')=='true'){
$("#outraDiv ul li").show();
}else if($(this).next().attr('aria-hidden')=='false'){
$("#outraDiv ul li").hide();
}
});
}
Código do efeito do accordion:
$(function() {
$("#accordion2").accordion({
collapsible: true
});
controlaOutraDiv("#accordion2");
});
id
assim como ver com<div id="outraDiv">
se precisar de vários elementos com a mesma identificação use classes assim<div class="outraDiv">