Recognize aria-selected="false" with jQuery

Navigation
5

How do I make a jQuery that recognizes if aria-selected="false" and if true change the background of the "arrow-btn-sub" div to another image (arrow img). This is part of an accordion and I want to change the img of the arrow when the part is open ( <div id="outraDiv"> ), the '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 until now, but I still can not make it work as a wish 

<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>
    
asked by anonymous 13.02.2014 / 12:01

2 answers

6

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

In% with% headers are beforeActive for the element that just activated and ui.newHeader for the element that has just been disabled.

No ui.oldHeader the header is the create that will return the active element of the header as soon as ui.header is created.

The result of this code was: 

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

For background testing I've used this css : 

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

This way you will be able to insert this code and put css to display what you need.

    
13.02.2014 / 14:44
0
if($("#outraDiv").attr('aria-selected')=="false")
{   

 /* trocar imagem */  

}
    
13.02.2014 / 14:36
What is the difference between performance between different types of string concatenation? How to use methods contracts and why?