Javascript Como manipular (class e aria-expanded) com javascript

[EddK]

Olá preciso de ajuda em javascript.

Quando clico no botão ocorre a seguinte alteração (active e true): <button class"accordion active" aria-expanded="true"> preciso que o active apareça no accordion-item e não no accordion, e aria-expanded="true" permaneça com a alteração no <button> mesmo.

 

obs.: se eu trocar no javascript:   var acc = document.getElementsByClassName("accordion");

          para:   var acc = document.getElementsByClassName("accordion-item");

          ao clicar no botão o active vai para o accordion-item mas leva junto o aria-expanded="true" junto.

 

HTML:

...
<li class="accordion-item">
    <button class="accordion" aria-expanded="false">
         <span> texto </span>
    </button>
    
    <div class="panel"> 
        <p> texto </p>
        ...
    </div>
</li>
...

 

JAVASCRIPT:

var acc = document.getElementsByClassName("accordion");
var expanders = document.getElementsByClassName("expander");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function () {

        this.classList.toggle("active");
        var panel = this.nextElementSibling;

        if (panel.style.display === "block") {
            panel.style.display = "none";

            this.setAttribute('aria-expanded', 'false')
        } else {
            panel.style.display = "block";

            this.setAttribute('aria-expanded', 'true')
        }
    });
}

 

[GabrielSennaMs]

@EddK

 

Isso aqui deve resolver o seu problema

window.onload = function () {
    const acc = document.getElementsByClassName("accordion-item");
    const expanders = document.getElementsByClassName("expander");

    for (let i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function () {
            const
                panel = this.getElementsByClassName("panel")[0],
                btn = this.getElementsByClassName("accordion")[0];

            this.classList.toggle("active");

            if (!this.classList.contains("active")) {
                panel.style.display = "none";
                btn.setAttribute('aria-expanded', 'false')
            }
            else {
                panel.style.display = "block";
                btn.setAttribute('aria-expanded', 'true')
            }
        });
    }
}

 

Uma boa opção seria você também no elemento com a class 'panel' trabalhar com uma class como 'show', e com essa class criar uma animação para o elemento.

[EddK]

@GabrielSennaMs @GabrielSennaMs Muito obrigado!!! Maravilha!!!