JQuery Apply CSS Class to Toggled Element -

how apply class bootstrap toggled element?

i have following:

<ul class="my-nav ">      <li >          <a data-toggle="collapse" href="#one" aria-expanded="false" aria-controls="one" class="collapsed">                ...          </a>      </li>      <li >          <a data-toggle="collapse" href="#two" aria-expanded="false" aria-controls="two" class="collapsed">                ...          </a>      </li> </ul>  <div class="collapse my-pane" id="one">      <ul >           <li ><a href="#">...</a></li>           <li ><a href="#">...</a></li>      </ul> </div>   <div class="collapse my-pane" id="two">      <ul >           <li ><a href="#">...</a></li>           <li ><a href="#">...</a></li>      </ul> </div>                         

when toggle link #one following css applied it:

<li >      <a data-toggle="one" href="#one" aria-expanded="true" aria-controls="one" class="">                ...      </a> </li> 

now want apply background colour when it's active. how can use jquery apply following css selected <li>:

.my-nav li.my-nav-selected {     background-color: background-color: #dae1f3;  } 

you don't need javascript, can css

.my-nav li a[aria-expanded="true"]{     background-color: #dae1f3;  } 

http://jsfiddle.net/9tt7dgz9/