How to use aria-expanded true to change a css property

Question

I want to use aria-expanded  true  to change a css property like an active class     lt li class  active  gt      lt a href   3a  class  btn btn-default btn-lg  data-toggle  tab  aria-expanded  true  gt           lt span class  network-name  gt Google  lt  span gt      lt  a gt   lt  li gt    I want the  lt a gt  to background-color   42DCA3 but only when aria-expanded  true

User · Accepted Answer

Why javascript when you can use just css?

_x000D_

a[aria-expanded="true"]{_x000D_
  background-color: #42DCA3;_x000D_
}

_x000D_

<li class="active">_x000D_
   <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true"> _x000D_
       <span class="network-name">Google+</span>_x000D_
   </a>_x000D_
</li>_x000D_
<li class="active">_x000D_
   <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false"> _x000D_
       <span class="network-name">Google+</span>_x000D_
   </a>_x000D_
</li>

_x000D_

User · Answer

You could use querySelector   with attribute selector   attribute  value     then affect css rule using  style  as you can see in the example below    x000D   x000D  document querySelector  a aria-expanded  true     style backgroundColor     42DCA3   x000D   lt ul gt  lt li class  active  gt  x000D     lt a href   3a  class  btn btn-default btn-lg  data-toggle  tab  aria-expanded  true  gt   lt span class  network-name  gt Google  with aria expanded true lt  span gt  lt  a gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt a href   3a  class  btn btn-default btn-lg  data-toggle  tab  aria-expanded  false  gt   lt span class  network-name  gt Google  with aria expanded false lt  span gt  lt  a gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    jQuery solution    If you want to use a jQuery solution you could simply use css   method       a aria-expanded  true     css  background-color    42DCA3      Hope this helps

User · Answer

If you were open to using JQuery  you could modify the background color for any link that has the property aria-expanded set to true by doing the following        a aria-expanded  true     css  background-color     42DCA3      Depending on how specific you want to be regarding which links this applies to  you may have to slightly modify your selector

User · Answer

x000D   x000D  li a aria-expanded  true   span  x000D      color  red  x000D    x000D   lt li class  active  gt  x000D       lt a href   3a  class  btn btn-default btn-lg  data-toggle  tab  aria-expanded  true  gt  x000D           lt span class  network-name  gt Google  lt  span gt  x000D       lt  a gt  x000D   lt  li gt  x000D   lt li class  active  gt  x000D       lt a href   3a  class  btn btn-default btn-lg  data-toggle  tab  aria-expanded  false  gt  x000D           lt span class  network-name  gt Google  lt  span gt  x000D       lt  a gt  x000D   lt  li gt  x000D   x000D   x000D     x000D   x000D  li a aria-expanded  true    x000D      background  yellow  x000D    x000D   lt li class  active  gt  x000D       lt a href   3a  class  btn btn-default btn-lg  data-toggle  tab  aria-expanded  true  gt  x000D           lt span class  network-name  gt Google  lt  span gt  x000D       lt  a gt  x000D   lt  li gt  x000D   lt li class  active  gt  x000D       lt a href   3a  class  btn btn-default btn-lg  data-toggle  tab  aria-expanded  false  gt  x000D           lt span class  network-name  gt Google  lt  span gt  x000D       lt  a gt  x000D   lt  li gt  x000D   x000D   x000D

[javascript] How to use aria-expanded="true" to change a css property

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css