how to change css using jquery in twitter bootstrap3
<p>I am having collapsible panels in bootstrap </p>

<pre><code>&lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-heading"&gt; &lt;h4&gt; &lt;a data-toggle="collapse" href="#collapse2"&gt;ADDRESS&lt;/a&gt;&lt;/h4&gt;&lt;/div&gt;
                        &lt;div id="collapse2" class="panel-collapse collapse"&gt;
                            &lt;div class="panel-body"&gt;
                              &lt;div class="list-group"&gt;
                                &lt;?php

                                        echo "&lt;a href='#' class='list-group-item'&gt;".$_GET['addr']."&lt;/a&gt;";
                                ?&gt;
                              &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
</code></pre>

<p>to which onclick I am toggling the class from panel-default to panel-primary using jquery and changing the css on particular click and onmouseover events. for Jquery I am using the code.</p>

<pre><code>$( function() {
              $('.panel-default').click( function() {
                  $(this).toggleClass('panel-primary');
                $(this).find('a:first').css({'color':'white','text-decoration':'none'});
                } );

            $('.panel-primary').on('click',function(){

                $(this).toggleClass('panel-default');
                $(this).find('a:first').css({'color':'red','text-decoration':'none','font-size':'100px'});
            });

            $('.panel-default').on('mouseover',function(){$(this).find('a:first').css({'text-decoration':'none'});});

        }); 
</code></pre>

<p>but once it toggles back to panel-default from panel-primary its not changing the css of <code>a:first</code> and remains in white color.</p>