Javascript Como alterar valor do aria-expanded com javascript puro

[EddK]

Bom dia!

Preciso alterar o valor do aria-expanded="false" para aria-expanded="true" em botões de accordion quando expandidos. E ao clicar novamente para esconder o texto volte para aria-expanded="false" (usando apenas JavaScript Puro).

 

Alguém pode me ajudar?

 

Desde já muito obrigado

[GabrielSennaMs]

@EddK Bom isso aqui deve servir

 

<button type="button" id="btn" aria-expanded="false">
    teste
</button>
<script>
document.querySelector("#btn").addEventListener("click", function(event)
{
    let value = event.target.getAttribute("aria-expanded");

    event.target.setAttribute("aria-expanded", (value == "true") ? "false" : "true");
});
 </script>

 

Agora você deve modificar o seletor para o seu botão no caso eu usei ID como o meu seletor

[EddK]

@GabrielSennaMs 

Como tenho vários itens no accordion, como faço quanto aos IDs?

[Rui Guilherme]

@EddK Nesse caso você precisa usar querySelectorAll

 

HTML:

<button type="button" id="btn" aria-expanded="false">
    teste1
</button>

<button type="button" id="btn" aria-expanded="false">
    teste2
</button>

<button type="button" id="btn" aria-expanded="false">
    teste3
</button>

<button type="button" id="btn" aria-expanded="false">
    teste4
</button>

 

 

JS:

document.querySelectorAll("#btn").forEach((elems) => {
  elems.addEventListener("click", (event) => {
    const { target } = event
    const value = target.getAttribute("aria-expanded")
    target.setAttribute("aria-expanded", value === "true" ? "false" : "true")
  })
})

 

Demo Online: https://codepen.io/ruiguilherme/pen/LYLagGR?editors=1010

[EddK]

@Rui Guilherme Mas o id tem que ser único.

[GabrielSennaMs]

@EddK

 

  Em 01/10/2021 às 15:08, EddK disse:

Mas o id tem que ser único.

Expandir  

 

Realmente, nesse caso você pode trocar por um seletor diferente.

 

<button type="button" class="btn" aria-expanded="false">
    teste1
</button>

<button type="button" class="btn" aria-expanded="false">
    teste2
</button>

// ou

<button type="button" data-action="btn" aria-expanded="false">
    teste1
</button>

<button type="button" data-action="btn" aria-expanded="false">
    teste2
</button>

 

No js

document.querySelectorAll(".btn");

// OU

document.querySelectorAll('[data-action="btn"]');

 

[EddK]

@GabrielSennaMs Obrigado

 

[Rui Guilherme]

Exatamente, basta alterar o seletor... JavaScript desde da versão ES6 usa os mesmo seletores do CSS, recomendo as seguintes leituras para conseguir lidar sozinho com problemas semelhantes no futuro:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors