jQuery who changes div background specifies

Asked

Viewed 447 times

4

I need a help with the following problem, I have the following HTML, which is part of an 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>

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’ve tried in many ways to do what I wish based on this code, but I couldn’t. I want the H3 that has the "btn-sub-main" class to change the background color when the field Aria-Hidden')=='true , or add a class and insert the CSS features I want.

Below is another script that exists in this accordion that hides/shows me to div="otherDiv", I tried to use it by putting the two together 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();

        }
    });
}

Code of the accordion effect:

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

jsFiddle

javascript jquery html5 css3

  • Can you add more code here to give a better example of your problem? http://jsfiddle.net/XQdc3/

  • 2

    See if you have improved a little friend, this is all the JS code I have regarding accordion2 and I inserted a little more of html, already showing 2 tables of accordion2.

  • 1

    Before posting my reply will a tip: on the same page [tag:html] do not put 2 elements with the same id as well as see with <div id="outraDiv"> if you need several elements with the same identification use classes like this <div class="outraDiv">

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 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 duplicated ID’s are invalid HTML and that this causes code breaks. Thus fix in HTML id="outraDiv" for class="outraDiv" and test this CSS selector instead of jQuery:

h3.ui-state-active .outraDiv ul li{
    display: none;
}

0

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

This event has two parameters event and ui where:

  • event - It represents the type of event being called, in which case it is the beforeActivate
  • ui - Represents the elements that this event manipulates
  • 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 be deactivated. (The header that is about to be deactivated)
    • newPanel Type: jQuery The panel that is about to be Activated. (The content that is about to be disabled)
    • oldPanel Type: jQuery The panel that is about to be deactivated. (The content that is about to be deactivated)

This way just like you use ui.newHeader.attr("id") and ui.oldHeader.attr("id") to get the header ids that have just been activated and the header that has just been disabled respectively, you can use ui.newPanel.attr("id") and ui.oldPanel.attr("id") to get the ids of the content that has just been enabled and the content that has just been disabled respectively.

That way to change the background of these elements you need to use ui.newPanel.attr("algum_atributo") or ui.oldPanel.attr("algum_atributo") to retrieve the attributes of Panels.

Another even simpler way to use is to make use of the classes that uses to define which header and panel are currently active.

Are they:

  • .ui-accordion-header-active - is used in the header that is active
  • .ui-accordion-content-active - is used in content that is active

Browser other questions tagged javascript jquery html5 css3

You are not signed in. Login or sign up in order to post.