How to use Jquery how to change the aria-expanded false part of a dom element Bootstrap

Question

I have the following element    lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   navbar  aria-expanded  false  aria-controls  navbar  gt    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

User · Answer

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

_x000D_

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_

User · Answer

You can use  attr   as a part of however you plan to toggle it      button   attr  aria-expanded   true

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

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to twitter-bootstrap