Menu
I want to use aria-expanded="true" to change a css property like an active class :
<li class="active"> <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true"> <span class="network-name">Google+</span> </a> </li> I want the <a> to background-color: #42DCA3 but only when aria-expanded="true".
780
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.
When a menu is displayed, the button object that toggles the visibility of that menu has aria-expanded="true" set. When the menu is hidden, aria-expanded can be omitted. If specified when the menu is hidden, it should be set as aria-expanded="false" .
The global attribute aria-expanded is used for exactly this purpose. It takes one of two values: true or false. true means a section that this element denotes is currently expanded (visible), false means the expandable section or items is/are currently collapsed (invisible).
Why javascript when you can use just css?
a[aria-expanded="true"]{ background-color: #42DCA3; }<li class="active"> <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true"> <span class="network-name">Google+</span> </a> </li> <li class="active"> <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false"> <span class="network-name">Google+</span> </a> </li>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
