Skip to main content
added 6 characters in body
Fonte Link
Erlon Charles
  • 5,5mil
  • 11
  • 30
  • 48

O .accordion() tem dois eventos chamados beforeActivate e create utilizei os dois eventos para maniputarmanipular o cabeçalho, e para removeremover os icones utilizei o option icons.

No beforeActive os cabeçalhos são ui.newHeader para o elemento que acabou de ser ativado e ui.oldHeader para o elemento que acabou de ser desativado.

No create o cabeçalho é o ui.header que retornará o elemento ativo do cabeçalho assim que o .accordion() for criado.

O resultado do código foi esse:

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

Para fazer os teste com background utilizei este :

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

Dessa forma você vai poder inserir este código e colocar o para exibir o que precisar.

O .accordion() tem dois eventos chamados beforeActivate e create utilizei os dois eventos para maniputar o cabeçalho, para remove os icones utilizei o option icons.

O resultado do código foi esse:

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

Para fazer os teste com background utilizei este :

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

Dessa forma você vai poder inserir este código e colocar o para exibir o que precisar.

O .accordion() tem dois eventos chamados beforeActivate e create utilizei os dois eventos para manipular o cabeçalho e para remover os icones utilizei o option icons.

No beforeActive os cabeçalhos são ui.newHeader para o elemento que acabou de ser ativado e ui.oldHeader para o elemento que acabou de ser desativado.

No create o cabeçalho é o ui.header que retornará o elemento ativo do cabeçalho assim que o .accordion() for criado.

O resultado do código foi esse:

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

Para fazer os teste com background utilizei este :

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

Dessa forma você vai poder inserir este código e colocar o para exibir o que precisar.

added 6 characters in body
Fonte Link
Erlon Charles
  • 5,5mil
  • 11
  • 30
  • 48

O .accordion() tem dois eventos chamados beforeActivate e create utilizei os dois eventos para maniputar o cabeçalho, para remove os icones utilizei o option icons.

O resultado do código foi esse:

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

Para fazer os teste com background utilizei este :

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

Dessa forma você vai poder inserir este código e colocar o css para exibir o que precisar.

O .accordion() tem dois eventos chamados beforeActivate e create utilizei os dois eventos para maniputar o cabeçalho, para remove os icones utilizei o option icons.

O resultado do código foi esse:

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

Para fazer os teste com background utilizei este :

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

Dessa forma você vai poder inserir este código e colocar o css para exibir o que precisar.

O .accordion() tem dois eventos chamados beforeActivate e create utilizei os dois eventos para maniputar o cabeçalho, para remove os icones utilizei o option icons.

O resultado do código foi esse:

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

Para fazer os teste com background utilizei este :

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

Dessa forma você vai poder inserir este código e colocar o para exibir o que precisar.

added 553 characters in body
Fonte Link
Erlon Charles
  • 5,5mil
  • 11
  • 30
  • 48

O .accordion() tem uma opção justamente para se fazer isso ela se chamadois eventos chamados iconsbeforeActivate e dentro você passa um objeto com a classe do icone que você quer para quando estiver fechado (headercreate) e passa outro pra quando estiver aberto utilizei os dois eventos para maniputar o cabeçalho, para remove os icones utilizei o (option activeHeadericons).

Exemplo O resultado do código foi esse:

$(function() "#accordion"{
    $("#accordion").accordion({
        icons: {null,
        headerbeforeActivate: "uifunction( event, ui ) {
            $("#" + ui.newHeader.attr("id")).children(".seta-iconbtn-circlesub").toggleClass("active");
            $("#" + ui.oldHeader.attr("id")).children(".seta-arrowbtn-e"sub").toggleClass("active");
        },
        activeHeadercreate: "ui-icon-circlefunction( event, ui ) {
            $("#" + ui.header.attr("id")).children(".seta-arrowbtn-s"sub").toggleClass("active");
        }
    });
});

Para fazer os teste com background utilizei este :

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

Dessa forma você vai poder inserir este código e colocar o css para exibir o que precisar.

O .accordion() tem uma opção justamente para se fazer isso ela se chama icons e dentro você passa um objeto com a classe do icone que você quer para quando estiver fechado (header) e passa outro pra quando estiver aberto (activeHeader).

Exemplo:

$( "#accordion" ).accordion({
    icons: {
        header: "ui-icon-circle-arrow-e",
        activeHeader: "ui-icon-circle-arrow-s"
    }
});

O .accordion() tem dois eventos chamados beforeActivate e create utilizei os dois eventos para maniputar o cabeçalho, para remove os icones utilizei o option icons.

O resultado do código foi esse:

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

Para fazer os teste com background utilizei este :

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

Dessa forma você vai poder inserir este código e colocar o css para exibir o que precisar.

Fonte Link
Erlon Charles
  • 5,5mil
  • 11
  • 30
  • 48
Carregando