Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding class if aria-expanded === true

How can I go about toggling a class 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");
  }
})

edit - more info

Basically I watch to switch between a plus icon and a minus icon, replacing the img in the .accordion-class with content: url(another image);. Here is my CSS as well.

css

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

.accordion-minus {
  opacity: .5;
  content: url(../../assets/img/minus-1.png);
}
like image 502
Julian Samarjiev Avatar asked Sep 04 '15 13:09

Julian Samarjiev


People also ask

How do you check if aria-expanded is true?

The button element has an aria-expanded that starts as false which would be the case for an expandable hamburger menu. Then we do an if/then operation on the variable "x". if the value is true , then change it to false , if it is false , then change it to true .

What is aria-expanded true CSS?

aria-expanded – indicates that the button controls another component in the interface, and relays that component's current state. aria-pressed – indicates that the button behaves similarly to a checkbox, in that it has its state toggles between being pressed or unpressed.

How do I expand my aria value?

Access the attributes array of the element and find the position of the wanted attribute - in this case that will be 4, because aria-expanded is the 5th attribute of the tag. From there you just get the value, and that should give you "false" (in this case).


1 Answers

looks like you're just missing the class prefix on the selector

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

it returns a string aswell, so wrap the true in quotes

like image 195
Michael Avatar answered Sep 17 '22 15:09

Michael