How to use Jquery how to change the aria-expanded="false" part of a dom element (Bootstrap)?

Question

I have the following element:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

I want to use jquery (or just javascript would work) to alter the aria-expanded field to toggle it between true and false.

How would I go about this?

Thanks!

Answer 1

You can use .attr() as a part of however you plan to toggle it:

$("button").attr("aria-expanded","true");

Answer 2

Since the question asked for either jQuery or vanilla JS, here's an answer with vanilla JS.

I've added some CSS to the demo below to change the button's font color to red when its aria-expanded is set to true

const button = document.querySelector('button');

button.addEventListener('click', () => {
  button.ariaExpanded = !JSON.parse(button.ariaExpanded);
})

button[aria-expanded="true"] {
  color: red;
}

<button type="button" aria-expanded="false">Click me!</button>