fraser dale fraser dale - 2 months ago 69
CSS Question

I want to use aria-expanded = "true" to change a css property

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"
.

Answer

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>