javascript – jQuery that change specific div background

Question:

I need some help with the following problem, I have the following HTML, which is part of an accordion

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

I have the following Javascript code that changes the background of the DIV="seta-btn-sub" (arrow image):

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

I tried in several ways to do what I want based on this code, but I couldn't. I want the h3 that has the class "btn-sub-main" to change the background color when the field aria-hidden')=='true , or that I add a class and there I insert the CSS characteristics I want.

Below is another script that exists in this accordion that hides/shows the div="outraDiv" , I tried to use it by joining the two in different ways but I couldn't.

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();

        }
    });
}

Accordion effect code:

$(function() {
    $("#accordion2").accordion({
        collapsible: true
    });
    controlaOutraDiv("#accordion2");
});

jsFiddle

Answer:

The accordion itself already assigns a class to the element that is open, so you can use .ui-state-active to reach the open div. Note that the plugin uses a background-image which you need to disable if you want to use the background.

Example

h3.ui-state-active {
    background-color: #ccf;
    background-image: none;
}

Regarding the second part of your question where do you want to hide the #outraDiv ul li I think the answer is also CSS.

Note that duplicate ID's are invalid HTML and that this causes code breaks. So correct the HTML id="outraDiv" to class="outraDiv" and test this CSS selector instead of jQuery:

h3.ui-state-active .outraDiv ul li{
    display: none;
}
Post Views: 0
Scroll to Top