Recognize Aria-Selected="false" with jQuery

Question

How do I make a jQuery that recognizes if aria-selected="false" and if true change the background of the div "arrow-btn-sub" to another image (arrow img). This is part of an acordion and I want to change the image of the arrow when the part is open (<div id="outraDiv">), area Selected appears inside H3.

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

I’ve done something like this so far, but I haven’t been able to make it work

<script>
    if($("#aria-selected").val() == true){
        $(".seta-btn-sub").css("background-image","url(images/seta-blue.png);");
    }
    else if($("#aria-selected").val() == false){
        $(".seta-btn-sub").css("background-image","url(images/seta-padrao-azul.png);");
    }
</script>  

Answer 1

The .accordion() has two events called beforeActivate and create I used both events to manipulate the header and to remove the icons I used the option icons.

In the beforeActive the headers are ui.newHeader for the element that has just been activated, and ui.oldHeader for the element that has just been deactivated.

In the create the header is the ui.header which will return the active header element as soon as the .accordion() was created.

The result of the code was this:

$(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");
        }
    });
});

To make the tests with background I used this css:

.seta-btn-sub {
    background: red;
    padding: 10px;
    float:left;
    border-radius: 7px;
}
.seta-btn-sub.active{
    background: #00FF00;
}

That way you can enter this code and put the css to display whatever you need.