Get aria-expanded value

Question

I didn't find a way to get aria-expanded value from DOM.

<a class="accordion-toggle collapsed" href="#collapse-One" data-parent="#accordion-1" data-toggle="collapse" aria-expanded="false">     <i class="fa fa-search-plus"></i>     test </a> 

I want to test if it's true then I can change <i> class to fa-search-minus. I tried this but I always get an undefined value:

console.log($(this).find('a.aria-expanded').val()); 

Answer 1

aria-expanded is an attribute on the element, not a class, so the selector is incorrect. Secondly, you should use the attr() function to get the value of that attribute. val() is intended to retrieve the value attribute from form related elements, such as input and textarea. Try this:

console.log($(this).find('a[aria-expanded]').attr('aria-expanded')); 

Answer 2

I wanted to add in a second pure javascript way to get the aria-expanded attribute

document.getElementById('test').getAttribute('aria-expanded') 

The above will get the element by id after that you can get any attribute by name.