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!
This question is related to
javascript
jquery
html
css
twitter-bootstrap
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');_x000D_
_x000D_
button.addEventListener('click', () => {_x000D_
button.ariaExpanded = !JSON.parse(button.ariaExpanded);_x000D_
})
_x000D_
button[aria-expanded="true"] {_x000D_
color: red;_x000D_
}
_x000D_
<button type="button" aria-expanded="false">Click me!</button>
_x000D_
Source: Stackoverflow.com