jQuery switch div background specifies

Navigation
4

I need a 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="arrow-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 have tried in many ways to do what I want based on this code, but I could not. I want the h3 that has the "btn-sub-main" class to change the background color when the aria-hidden ') field ==' true , or add a class and then insert the CSS characteristic I desire.

Below is another script that exists in this accordion that hides / shows me the div="otherDiv" , I tried to join it in several ways but could not. 

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

    
asked by anonymous 17.02.2014 / 19:58

2 answers

5

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 that needs to be disabled 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 you want to hide #outraDiv ul li I think the answer is also CSS.

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

h3.ui-state-active .outraDiv ul li{
    display: none;
}
    
17.02.2014 / 20:29
0

According to the jQuery API-ui accordion there is an event called beforeActivate .

This event has two parameters event and ui where:

  • event - Represents the type of event being called, in this case it is beforeActivate
  • ui - Represents the elements that this event handles
  • ui Type: Object
    • newHeader Type: jQuery The header that is about to be activated. (The header that is about to be activated)
    • oldHeader Type: jQuery The header that is about to deactivated. (The header that is about to be disabled)
    • newPanel Type: jQuery The panel that is about to be activated. (Content that is about to be deactivated)
    • oldPanel Type: jQuery The panel that is about to deactivated. (The content that is about to be deactivated)

In this way just as you use ui.newHeader.attr("id") and ui.oldHeader.attr("id") to get the ids of the header that just activated and the header that has just been deactivated respectively, you can use ui.newPanel.attr("id") and ui.oldPanel.attr("id") to get the ids of the content that has just been activated and the content that has just been deactivated respectively.

In order to change the background of these elements you need to use ui.newPanel.attr("algum_atributo") or ui.oldPanel.attr("algum_atributo") to get the attributes of Panels .

jquery-ui uses to define which header and panel are currently active.

They are:

  • .ui-accordion-header-active - is used in the header that is active
  • .ui-accordion-content-active - is used in content that is active
17.02.2014 / 20:49
Automatic PHP Function Is it correct to create a variable within an if?