Adding a class if aria-extended === true

Question

How to switch to class switching if aria=expanded === true? I have the following markup:

HTML

<a id="{{content.static.productDetailsToggleId}}" class="collapsed pdp-accord-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">{{content.static.productDetailsText}}<img class="accordion-plus" src="{{meta.assetsPath}}img/plus79.png" alt="accordion content">
</a>

Js

$(function () {
  if ($('pdp-accord-toggle').attr('aria-expanded') === true) {
    $(this).find(".accordion-plus").toggleClass("accordion-minus");
  }
})

change - more

Basically, I watch the switch between the icon plusand the icon minus, replacing imgwith .accordion-classby content: url(another image);. Here is my CSS.

CSS

.accordion-plus {
  height: 1em;
  float: right;
  margin-right: 1em;
}

.accordion-minus {
  opacity: .5;
  content: url(../../assets/img/minus-1.png);
}

Answer 1

it looks like you just didn't specify the class prefix on the selector

  if ($('.pdp-accord-toggle').attr('aria-expanded') === "true") {
  }

it also returns a string, so wrap true in quotation marks

Answer 2

that would be easier

$("#pdp-accord-toggle[aria-expanded='true']").find(".accordion-plus")