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);
}
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 .
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.
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).
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With